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

相关推荐
wearegogog1234 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars4 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤5 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·5 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°5 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
Irene19915 小时前
Vue3 <Suspense> 使用指南与注意事项
vue.js·suspense
qq_419854055 小时前
CSS动效
前端·javascript·css
烛阴5 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪6 小时前
markstream-vue实战踩坑笔记
前端
C_心欲无痕6 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx