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)的绑定结果。
而如果用户输入的不是数字，这个指令并不会产生任何效果。

上代码：

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

new Vue({
   el:"#example",
   data:{
     message:""
   },
   methods:{
     assay(){
       alert(typeof this.message);
     }
   }
})

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

 

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

 

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

 

 

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

当使用了trim修饰符后

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