Vue中V-model指令的修饰符讲解(lazy/number/trim)

一、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:后两种大家可以自行尝试一下，

以上的修饰符帮助更好地接受用户地输入的数据~~