5.1.5　值绑定

通常情况下，对于text、radio、select组件，通过v-model绑定的值都是字符串。checkbox除外，checkbox值可能是布尔值。有时我们会有动态绑定Vue.js实例属性的需求，这时可以使用v-bind来实现这个需求（通过v-bind来代替直接使用value属性）。我们还可以绑定非字符串的值，如数值、对象、数组等。

v-model用来在View与Model之间同步数据，但是有时候需要控制同步发生的时机，或者在数据同步到Model前将数据转换为Number类型。此时，可以在v-model指令所在的form控件上添加相应的修饰指令来实现这个需求。v-model修饰指令有以下几个。

1．lazy

在默认情况下，v-model在input中同步输入框的值与数据，可以添加一个lazy特性，从而改为在change事件中去同步。代码如下：

    <input v-model="msg" lazy>
    {{msg}}

2．debounce

设置一个最小的延时，在每次敲击后延时同步输入框的值到Model中。如果每次更新都要进行高耗操作（例如，在提示中输入Ajax请求），它较为有用。代码如下：

    <input v-model="msg" debounce="300">

上述代码表示，在用户输入完毕300ms后，vm.msg才会被更新。

提示：该指令是用来延迟同步用户输入的数据到Model中，并不会延迟用户输入事件的执行。因此，如果想要获取变化后的数据，应该使用vm.$watch()来监听msg的变化，而不是在事件中获取最新数据。

3．number

当传给后端的字段类型必须是数值的时候，可以在v-model所在控件上使用number指令（该指令会在用户输入时被同步到Model中，将其转换为数值类型）。如果转换结果为NaN，则对应的Model值还是用户输入的原始值。代码如下：

    <input v-model="age" number>