Vue学习笔记 - 表单修饰符

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。
使用 lazy 修饰符，从而转变为使用 change 事件进行同步

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

.number

首先声明这个number并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number类型

举个例子，如果用户输入300，data 中绑定的其实是'300'(string)，添加 number 指令后可以得到 300(number)的绑定结果。
而如果用户输入的不是数字，这个指令并不会产生任何效果。

<div id="app">
    <input type="text" v-model.number="message">
    <p>{{message}}</p>
    <input @click="assay" type="button" value="获取"> 
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: ""
    },
    methods: {
        assay () {
            console.log(typeof this.message);
        }
    }
})
</script>

当不加number修饰符，输入123456..数字的时候显示的类型为string

.trim

过滤输入的首尾空白字符

<div id="app">
    <input type="text" v-model.trim="message">
    <p>{{message}}</p>
    <input @click="assay" type="button" value="获取"> 
</div>
<script>
new Vue({
    el: '#app',
    data: {
        message: ""
    },
    methods: {
        assay () {
            console.log(this.message);
        }
    }
})
</script>

当不添加 trim 修饰符