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修饰符后
这样就自动过滤用户输入的首尾空白字符