双向数据绑定

截止到目前为止，我们看到的 Vue 的『响应式』的能力都是『单向数据绑定』。

例如下面的例子：

<p><input type="text" v-bind:value="name"/></p>
<p>我的名字是: {{ name }}</p>

data() {
  return {
    name: 'init value'
  }
}

你会发现 JS 代码中：

• data.name 属性的值会影响页面（例如，<p>）的显示，但是

• 页面（例如，<input>）却影响不到 data.name 的属性的值！

这就是『单向数据绑定』。

在这种场景下，作为替代，可以使用 v-model 指令，它作用于输入框元素，将输入框的值绑定（同步）到 data 对象的对应属性上。

因此，输入框不但会接受 data 上的初始值，而且当输入内容更新时，data 上的属性值也会随之更新。

<input type="text" v-model="name"/>

需要注意的是，使用了 v-model 后，元素的 value 、checked 和 selected HTML 属性不会起效果（如果想设置输入元素的初始值，应该在 data 对象中设置）。例如：

<input type="text" v-model="name" value="init value"/>
<p>我的名字是: {{ name }}</p>

data() {
  return {
    name: ''
  }
}

上面这个例子中，input 的初始值仍然是由 name: '' 决定，value="init value" 并未起作用。

对于 Radio，需要注意的是，你要保证它们的 v-model 绑定的 data 属性是同一个。

<label><input type="radio" v-model="gender" value="男"> 男</label>
<label><input type="radio" v-model="gender" value="女"> 女</label>

<p>性别: {{ gender }}</p>

简而言之，普通元素通常是使用 v-bind 进行单向绑定，表单元素通常就是使用 v-model 进行双向绑定。

Vue 中的 v-model 指令能全面替代 jQuery 中的 $().val() 方法。