修饰符

.sync

vue 中有很多修饰符,我单拎出.sync 是因为在开发中经常会用到它,真的很好次!

常规下,子组件是不可以修改上游传入的属性数据的,需要调用上游传入的函数才可以实现,但是这样我们会额外的增加一个方法代码。于是……

// 父组件
<text-document v-bind:title.sync="doc.title"></text-document>
// 当我们用一个对象同时设置多个 prop 的时候,也可以将这个 .sync 修饰符和 v-bind 配合使用:
<text-document v-bind.sync="doc"></text-document>
// 这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去,然后各自添加用于更新的 v-on 监听器。
// 子组件修改值
this.$emit('update:title', newTitle)
// 如果是修改对象就点'update:doc.title', newTitle
1
2
3
4
5
6
7
8
一般很多情况下比如我们常用的第三方弹窗的关闭,就是这中方式封装的。

.lazy

在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件之后进行同步:

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
1
2

.number

如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符:

<input v-model.number="age" type="number">
1

这通常很有用,因为即使在 type="number" 时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析,则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符,可以给 v-model 添加 trim 修饰符:

<input v-model.trim="msg">
1

想要自定义修饰符可以看看官方的过滤器open in new window

Last Updated:
Contributors: websong