对 v-model 的理解

vue 使用 v-model 实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

考虑到表单元素大体上分为需要我们『动键盘』和『动鼠标』2 种，这里我们分别解释。

1. 用于『动键盘』的表单元素

TIP

这种情况下，我们不需要编写 HTML 时去设置表单元素的 value 。

在这种情况下，v-model 本质上是一个语法糖。例如，

<input v-model="test">

所起到的作用如同：

<input :value="test" @input="test = $event.target.value">

其中：

• @input 是对 <input>\输入事件的一个监听；
• :value="test" 是将监听事件中的数据放入到 input。

在这边需要强调一点，v-model 不仅可以给 input 赋值还可以获取 input 中的数据，而且数据的获取是实时的，因为语法糖中是用 @input 对输入框进行监听的。

2. 用于『动鼠标』的表单元素

TIP

这种情况下，需要我们去编写 HTML 时去设置表单元素的 value 。

这里『动鼠标』的表单元素指的是下拉框、单选按钮、复选框。对于这些元素，v-model 要利用我们提前准备好的值来影响『动鼠标』的表单元素的选中效果。

以下拉框为例：

<select v-model="test2">
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="深圳">深圳</option>
  <option value="武汉">武汉</option>
</select>
<p>{{ test2 }}</p>

• 我们在页面上选中哪一个选项，data.test2 的值就是哪一个选项的值；
• data.test2 的值是哪一个选项的值，页面呈现出的效果就是哪一个选项被选中。

单选按钮和下拉框也是同样的道理。

但是，复选框又有一点点特殊、不同。逻辑上，单选按钮和下拉框是带有互斥效果的，因此，它们的 v-model 绑定的 data 属性值都是一个单值（字符串）。但是多选框有多选效果，因此它的 v-mode 绑定的属性值的类型应该是一个字符串数组：

<input type="checkbox" v-model="test4" value="bj">北京
<input type="checkbox" v-model="test4" value="sh">上海
<input type="checkbox" v-model="test4" value="sz">深圳
<input type="checkbox" v-model="test4" value="wh">武汉
<p>{{ test4 }}</p>

它的 v-model 的绑定值：

data() {
    return {
        test4: []
    }
},

如果，你有意（或无意）将 data 的属性值的类型写成的是非数组，而是一个单值，例如：

data() {
    return {
        test4: undefined
    }
},

那么 vue 通过 v-model 为它赋的值是 boolean 值 true 或 false，来表示这个 checkbox 是否被选中。反过来，这个 true 或 false 又会进一步影响到其它绑定到同一个 data 属性上的所有的 checkbox，从而出现比较『诡异』的效果。

所以，对于多选框 checkbox 的 v-model 绑定的属性值的类型不要写错了。