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

相关推荐
张元清9 分钟前
电商 Feeds 流缓存策略:Temu vs 拼多多的技术选择
前端·javascript·面试
一枚前端小能手9 分钟前
🎨 CSS布局从入门到放弃?Grid让你重新爱上布局
前端·css
晴空雨10 分钟前
React 合成事件原理:从事件委托到 React 17 的重大改进
前端·react.js
魏嗣宗12 分钟前
Node.js 网络编程全解析:从 Socket 到 HTTP,再到流式协议
前端·全栈
pepedd86413 分钟前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
pepedd86427 分钟前
浅谈js拷贝问题-解决拷贝数据难题
前端·javascript·trae
@大迁世界28 分钟前
useCallback 的陷阱:当 React Hooks 反而拖了后腿
前端·javascript·react.js·前端框架·ecmascript
跟橙姐学代码29 分钟前
学Python别死记硬背,这份“编程生活化笔记”让你少走三年弯路
前端·python
前端缘梦29 分钟前
深入理解 Vue 中的虚拟 DOM:原理与实战价值
前端·vue.js·面试
Fantastic_sj30 分钟前
React 19 核心特性
前端·react.js·前端框架