Vue自定义v-model和其修饰符的内部机制

v-model 是一个重要的双向绑定语法糖。

然而,当我们使用自定义组件的v-model,或者如 Naive UI 的输入框组件(v-model:value),并试图使用 v-model.trim 或者 v-model:value.trim 修饰符时,会发现它并不起作用。

一起深入 NaiveUi,Vue源码看看怎么回事?

自定义 v-model 中的修饰符问题

失焦后空格还是存在。

查看NaiveUinInput组件源码。发现就是简单的自定义v-model

Vue.js 官方文档的说法

vue官网对自定义v-model后的修饰符并没有说会失效。只说了可以获取到修饰符。

Vue.js 官方演练场的编译结果

去vue官方演练场看看编译后的结果:

play.vuejs.org

发现自定义v-model 真的就是一个简单的语法糖。没有看到任何对修饰符的处理

看下vue内置的v-model

可以看到在input上使用 vue内置的 v-model 被编译后 使用了指令vModelText

到源码找到这个指令vModelText。看到是在这里对修饰符trim做的处理。
扩展一下吧,组件内部实现v-model,这个应该经常用到:

结论

在vue中,v-model添加修饰符只有在原生的input、textarea中生效。

对于第三方组件库得具体看它们自己有没有对修饰符处理。

v-model的内置修饰符:.lazy .number .trim

相关推荐
哆来A梦没有口袋4 分钟前
干货精讲 | 初级CSS面试高频考题
前端·css·面试
掘金0141 分钟前
EmbedPDF Vue 版 完整正文文档 全网首发
前端
OpenTiny社区42 分钟前
操作ArkTS页面跳转及路由相关心得
前端·typescript·web·opentiny
xiaohua0708day43 分钟前
Lodash库
前端·javascript·vue.js
huakoh43 分钟前
Claude Code 从零到上手指南:国产工具链复现80% Agent能力,DeepSeek+LangChain实战
前端
Ankkaya1 小时前
浏览器插件接入 Google 登录
前端
Asmewill1 小时前
DeepAgents学习笔记一(构建深度多智能体)
前端
万物皆对象6661 小时前
切换路由时页面空白问题(vue3)
前端·vue.js·typescript
突然好热1 小时前
TS 调试技巧
前端·javascript·typescript
h64648564h1 小时前
Flutter 国际化(i18n)全指南:一键切换中/英/日多语言
前端·javascript·flutter