.lazy
在默认情况下,v-model
在每次 input
事件触发后将输入框的值与数据进行同步 。
使用 lazy
修饰符,从而转变为使用 change
事件进行同步
<div id="app">
<input type="text" v-model.lazy="message">
<p>{{message}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: ""
}
})
</script>
.number
首先声明这个number
并不是限制用户的输入,而是将用户输入的数据尝试绑定为 js 中的 number
类型
举个例子,如果用户输入300,data 中绑定的其实是'300'(string),添加 number
指令后可以得到 300(number)的绑定结果。
而如果用户输入的不是数字,这个指令并不会产生任何效果。
<div id="app">
<input type="text" v-model.number="message">
<p>{{message}}</p>
<input @click="assay" type="button" value="获取">
</div>
<script>
new Vue({
el: '#app',
data: {
message: ""
},
methods: {
assay () {
console.log(typeof this.message);
}
}
})
</script>
当不加
number
修饰符,输入123456..数字的时候显示的类型为string
.trim
过滤输入的首尾空白字符
<div id="app">
<input type="text" v-model.trim="message">
<p>{{message}}</p>
<input @click="assay" type="button" value="获取">
</div>
<script>
new Vue({
el: '#app',
data: {
message: ""
},
methods: {
assay () {
console.log(this.message);
}
}
})
</script>
当不添加
trim
修饰符