vue 的修饰符之 .lazy .number .trim

最新推荐文章于 2025-06-11 21:19:38 发布

原创最新推荐文章于 2025-06-11 21:19:38 发布 · 509 阅读

CC 4.0 BY-SA版权

文章标签：

13 篇文章

订阅专栏

作者在看代码时发现v-model.lazy，经查询了解到这是Vue修饰符。文中介绍了三种Vue修饰符，.lazy使输入框在change事件中同步数据；.number可将输入值转为Number类型；.trim会自动过滤输入的首尾空格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看别人的代码时候,偶然发现别人写的代码里input标签的写法是v-model.lazy,初见政协发顿时有点蒙圈,本着不会就百度的原则查了一下,原来这是vue的修饰符.
下面简单记录一下,方便大家以后使用.

在输入框中,v-model默认是同步数据,使用.lazy会转变为在change时间中同步,也就是在失去焦点或者按下回车键时才更新.

写法是  <input type="text" v-model.lazy="msg">

.number 修饰符可以将输入的值转化为Number类型,否则虽然你输入的是数字,但是他的类型其实是String,在数字输入框中比较有用.

写法是   <input type="number" v-model.number="msg">
        <p>我的数据类型是：{{ typeof(msg) }}</p>

.trim 修饰符会自动过滤掉输入的首尾空格

写法是   <input type="etxt" v-model.trim="msg">
        <p>val的长度是：{{ msg.length }}</p>