欢迎访问我的博客https://qqqww.com/,祝码农同胞们早日走上人生巅峰,迎娶白富美~~~
与事件的修饰符类似,v-model也有修饰符,用于控制数据同步的时机
1 v-model.lazy
使用
.lazy
修饰符,会转变为在change
事件中同步,简单粗暴的讲就是,此时数据并不会像我们以前见到的v-model
那样实时更新数据,而是在失去焦点或者会车时更新,见下面示例代码
<div id = 'app'>
<input type = 'text' v-model.lazy = 'mes'>
<p>{{ mes }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mes: ''
}
})
</script>
2 v-model.number
看这个之前,需要明确的是,我们输入的数字,到底是
Number
类型还是String
类型,实际上,虽然输入的是数字,但实际上是String
,那么.number
修饰符就可以将输入的内容转化为Number
类型
<div id = 'app'>
<input type = 'number' v-model.number = 'mes'>
<p>{{ mes }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mes: 123456
}
})
</script>
3 v-model.trim
自动过滤输入的首尾空格
<div id = 'app'>
<input type = 'text' v-model.trim = 'mes'>
<p>{{ mes }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
mes: ' 123456 '
}
})
</script>