lazy
在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为在 change 事件_之后_进行同步
<div id="app">
<input type="text" v-model="value">{{value}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
value:''
}
})
</script>
例如这样一段代码,当文本框发生变化时,value值事实输出,但我们想要整个文本框输完,文本框失去焦点的时候再输出value值,那就用到lazy
<div id="app">
<input type="text" v-model.lazy="value">{{value}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
value:''
}
})
</script>
number
如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 number 修饰符
<div id="app">
<input type="text" v-model="value">{{value}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
value:''
},
watch:{
value(){
console.log(typeof this.value)
}
}
})
</script>
无论文本框中输入的是字符串,还是数字,打印出来的类型都是string 当用了number修饰符后,如果输入数字,会转换成数值型然后再赋给value
<div id="app">
<input type="text" v-model.number="value">{{value}}
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
value:''
},
watch:{
value(){
console.log(typeof this.value)
}
}
})
</script>
当输入字符型,控制台打印string 当输入数字型,控制台打印number
trim 清除首尾空格