v-model的修饰符

版权声明：本文章可转载，转载请注明本文地址，谢谢~ https://blog.csdn.net/weixin_43307658/article/details/89738585

欢迎访问我的博客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>