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

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