一、lazy
在input中输入数据,只有在失去焦点或者按回车时才会更新数据。
例如实现一下代码,message的数据一开始并没有根据输入框里的输入而改变,但是当你按下回车键或者点击别处(失去焦点时)message就会跟随变化。
<div>
<label for="message">
<input type="text" id="message" v-model.lazy="message" placeholder="message">
{{message}}
<label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好"
}
})
</script>
二、number
当输入数据为数字类型时,age会当作成number类型更改(一般默认为String类型)
<div>
<label for="age">
<input type="number" id="age" v-model.number="age" placeholder="age">
{{age}}
<label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
age: 0
}
})
</script>
三、trim
自动删除input输入数据的首尾多余的空格,然后再更新name里的数据
<div>
<label for="name">
<input type="text" id="name" v-model.trim="name" placeholder="name">
{{name}}
<label>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
age: 0,
name: ''
}
})
</script>
PS:后两种大家可以自行尝试一下,
以上的修饰符帮助更好地接受用户地输入的数据~~