lazy修饰符
双向绑定数据时,v-model默认是在同步输入的时候就把数据更新了
v-model.lazy作用:让数据在失去焦点或回车时才更新
number修饰符
web文本输入时,无论是数字还是字符串,默认的数据类型都是string
v-model.number作用:只输入number时数据类型为number
trim修饰符
输入内容前后有空格时,绑定的数据也会有
v-model.trim作用:去除输入内容前后的空格
代码测试例子
<div id="test">
<input type='text' v-model.lazy="txt" />{{txt}}<br>
<input type='text' v-model.number="txt2" />{{txt2}} <br>
<input type='text' v-model.trim="txt3" />{{txt3}}
</div>
<script type="text/javascript">
const test= new Vue({
el:'#test',
data:{
txt:'',
txt2:'',
txt3:''
}
});
</script>
在txt2输入数字加字符时时
console.log(typeof test.txt2)// string
在txt2输入数字时
console.log(typeof test.txt2)// number
在txt3输入’ 234asd ’
test.txt3 // ‘234asd’