Vue表单修饰符（lazy,number,trim）

lazy:使用了这个修饰符将会从“input事件”变成change事件进行同步

<div id="example">
    <input type="text" v-model.lazy="message">
    <p>{{ message }}</p>
</div>

new Vue({
   el:"#example",
   data:{
     message:""
   }
})

这样输入了数字并没有显示出来而是当移开光标后在触发

number

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

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

上代码：

1 <div id="example">
2     <input type="text" v-model.number="message">
3     <p>{{ message }}</p>
4     <button @click="assay()">获取当前的类型</button>
5 </div>

 1 new Vue({
 2    el:"#example",
 3    data:{
 4      message:""
 5    },
 6    methods:{
 7      assay(){
 8        alert(typeof this.message);
 9      }
10    }
11 })

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

而加了number修饰符就变成了number类型

当你输入的不是数字就不起作用了

trim可以用来过滤前后的空格

当使用了trim修饰符后

这样就自动过滤用户输入的首尾空白字符