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

相关推荐
逆境不可逃6 分钟前
【与我学 ClaudeCode】协作篇 之 Team Protocols :结构化请求 - 响应协作协议
前端
a1117769 分钟前
【无标题】
前端·开源·html
晓得迷路了10 分钟前
栗子前端技术周刊第 130 期 - Angular 22 RC、Rolldown 1.0.1、pnpm 11.2...
前端·javascript·react.js
审判长烧鸡10 分钟前
【AI问答/前端】前端瞒天过海局(三)
前端·vue·html5·js
桔筐13 分钟前
【无标题】
前端·vue.js
星栈独行13 分钟前
别让 API 跳去登录页:我在 Axum 里做了认证失败双通道
前端·后端·rust·开源·github·个人开发
এ慕ོ冬℘゜14 分钟前
原生 JS 手写日期选择器|完整可复用日历组件实战
前端·javascript·css
Maimai1080814 分钟前
用 TanStack Table、React Query 和 shadcn/ui 搭一个可维护的数据表格架构
前端·javascript·react.js·ui·架构·前端框架·reactjs
yqcoder16 分钟前
Web 世界的基石:深入解析 HTTP/1.1 的六大核心特点
前端·网络协议·http
转型AI的宏达19 分钟前
解除autoclaw白名单审批机制
java·服务器·前端