1. .lazy
对于文本输入框,默认情况下,v-model 推指令在每次 input 事件触发后,都会对文本输入框的值与数据进行同步。通过添加.lazy 修饰符,可以将上述行为改为在 change 事件触发之后进行同步,这样就只有在文本框失去焦点后才会改变对应的模型属性的值,因此称为“惰性”绑定。
<body>
<div id="app">
<!-- 事件修饰符.lazy(懒惰) 不会即时的将输入框的内容存放入data -->
<input v-model.lazy="msg">
<span>{{ msg }}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:'111'
}
})
</script>
</body
2. .number
如果希望用户输入的值能够自动转换为数值类型,那么可以给v-model指令添加.number修饰符
<body>
<div id="app">
<!-- 修饰符.number 吧string字符串转为number数字 -->
<input type="number" v-model="age">
<span>{{ age }}</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
age:''
},
watch:{
age(){
console.log(typeof(this.age));
}
}
})
</script>
</body>
3. .trim
如果要自动过滤用户输入的首位空白字符,可以给v-model指令添加.tirm修饰符<body>
<div id="app">
<input type="text" v-model.trim="msg">
<span>一个{{ msg.length }}个字符</span>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
msg:''
}
})
</script>
</body>