v-model 语法糖

本质上 v-model 是一个语法糖，使用 value 属性和 input 事件完成了双向绑定，当 value 值变化的时候监听到 input 事件，把获取到的值赋值给我们绑定的变量，这样就实现了双向数据绑定。

作用：用于在表单控件和组件上实现数据的双向绑定。

基本使用：表单控件上或是组件上使用 v-model=“data”即可。

v-model 的修饰符

v-model 修饰符的使用：直接在原有的基础上 {.修饰符}即可，例如 v-model.number="data"，这里用的就是 number 修饰符，作用是将默认输入的字符串转换为数字类型。

v-model 的修饰符主要有以下三种：

1、number ：将默认输入的字符串转换为数字类型
2、trim ： 清除输入字符串两边的空格
3、lazy ：实现数据懒同步

v-model.number

适用场景：需要将输入框输入的内容转换为数字格式用于计算时，使用 number 修饰符简化转换操作，直接获取到类型转换之后的数据。

<body>
    <div id="app">
        num1:<input type="text" v-model.number="num1" />
        num2:<input type="text" v-model.number="num2" />
        num1 + num2 = {{ num1 + num2 }}
    </div>
</body>
<script>
    var app = new Vue({
        el: "app",
        data: {
            num1: '',
            num2: ''
        }
    }
</script>

不使用 number 修饰符时，是字符串拼接，1 + 2 得到的结果是 "12"。

使用 number 修饰符时，字符串会被转换为数字类型进行相加运算，得到的结果是 3。

v-model.trim

适用场景：用户输入时做的优化，只需要中间部分的内容，允许中间部分出现空格，忽略两端输入的空格。

<body>
    <div id="app">
       输入： <input type="text" v-model.trim="value" />
       <br>
       输入的内容为{{ value }}xxx
    </div>
</body>
<script>
    var app = new Vue({
        el: "app",
        data: {
            value: ''
        }
    }
</script>

可以发现，中间部分内容的空格能保留，两边输入的空格被去掉了。

v-model.lazy

使用场景：正常使用只要是输入框的值发生改变时会立马监听到并更新到 model 的数据中，但是当绑定值在页面上其它地方也有使用时，会造成DOM频繁更新，造成性能的损失。使用 lazy 修饰符可以实现在文本框失去焦点的时候再去更新数据，避免相关DOM不必要的更新。

<body>
    <div id="app">
       输入： <input type="text" v-model.lazy="value" />
       <br>
       输入的内容为{{ value }}
    </div>
</body>
<script>
    var app = new Vue({
        el: "app",
        data: {
            value: ''
        }
    }
</script>

正常输入过程中不更新，视图没有发生变化...

输入框失去焦点时，立马进行更新。

总结

v-model的作用：用于在表单控件和组件上实现数据的双向绑定。

修饰符是在基本使用上的扩展，对应的业务场景中使用能有效提升开发效率，事半功倍。

number ：将默认输入的字符串转换为数字类型

trim ：清除输入字符串两边的空格

lazy ：实现绑定数据懒更新

vue中的 v-model 及修饰符

v-model 语法糖

v-model 的修饰符

v-model.number

v-model.trim

v-model.lazy

总结