Vue.js--表单修饰符（.lazy、.number、.trim）详解

.lazy

在输入框中，v-model默认是在input事件中同步输入框的数据（除了输入法中文输入的情况），使用修饰符 .lazy 会转变为 change 事件中同步（类似懒加载）:

<div id="app1">
    <input type="text" v-model.lazy="message">
    <p>{{message}}</p>
</div>
<script>
    var app1 = new Vue({
        el: '#app1',
        data: {
            message:'测试'
        }
    });
</script>

此时，message并不是实时更新的，而是在失焦或按回车时才更新。

.number

使用修饰符 .number 可以将输入转换为Number类型，否则虽然输入的数字，但它的类型其实是String，比如在数字输入框时非常有用：

<div id="app2">
    <input type="number" v-model.number="message">
    <p>{{ typeof message }}</p><br>
    <p>{{message}}</p>
</div>
<script>
    var app2 = new Vue({
        el: '#app2',
        data: {
            message: 123
        }
    });
</script>

.trim

修饰符 .trim 可以自动过滤输入的首尾空格。

<div id="app3">
    <textarea name="txt" id="" cols="30" rows="10" v-model.trim="message"></textarea>
    <p>{{message}}</p>
</div>
<script>
    var app3 = new Vue({
        el: '#app3',
        data: {
            message: ''
        }
    });
</script>