11 数据绑定之双向绑定

在上一章中，我们讨论了数据绑定的基本概念。现在，我们将深入探讨双向绑定，这是 Vue.js 强大而灵活的特性之一。在某些情况下，我们希望数据在模型（data）和视图（view）之间可以相互影响，也就是说，当数据变化时视图会自动更新，反之亦然。这种特性就是我们所说的双向绑定。

什么是双向绑定？

双向绑定是一种数据同步机制，使得模型的变化能够即时反映到视图上，而视图的变化也能同步到模型上。在 Vue.js 中，这种机制简化了开发者在处理用户输入及其对数据状态影响时的工作。

例如，如果用户在输入框中输入文本，输入框中显示的文本立刻更新到 Vue 实例的数据中；而当数据改变时，输入框中的文本也会立刻更新。

Vue.js 如何实现双向绑定？

Vue.js 利用 v-model 指令来实现双向绑定。v-model 是一个简洁且强大的指令，通常应用于表单元素，例如 <input>、<textarea> 和 <select>。

基础示例

让我们通过一个简单的例子来看看如何使用 v-model 实现双向绑定：

<div id="app">
  <input v-model="message" placeholder="请输入内容">
  <p>你输入的内容是：{{ message }}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
});
</script>

在这个例子中，我们定义了一个 Vue 实例，其中有一个数据属性 message。我们使用 v-model 将输入框的值绑定到 message 属性。当用户在输入框中输入内容时，message 会即时更新。而且，由于我们在段落标签中使用了 {{ message }}，每次输入内容时，段落中的文本也会实时更新，展示用户输入的内容。

深入了解双向绑定

绑定不同类型的表单元素

在 Vue.js 中，v-model 可以应用于多种类型的表单元素，包括复选框、单选框和下拉框。它们的用法略有不同，但都遵循双向绑定的原则。

复选框示例

对于复选框，我们可以将其与数组绑定：

<div id="app">
  <label>
    <input type="checkbox" v-model="checkedNames" value="Alice"> Alice
  </label>
  <label>
    <input type="checkbox" v-model="checkedNames" value="Bob"> Bob
  </label>
  <p>当前选中的名字：{{ checkedNames }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
});
</script>

在这个示例中，当用户勾选或取消勾选复选框时，checkedNames 数组会自动更新，以反映当前选中的复选框的值。

单选框示例

对于单选框，我们通常将其绑定到一个字符串值：

<div id="app">
  <label>
    <input type="radio" v-model="picked" value="苹果"> 苹果
  </label>
  <label>
    <input type="radio" v-model="picked" value="香蕉"> 香蕉
  </label>
  <p>你选择的水果是：{{ picked }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    picked: ''
  }
});
</script>

在这个示例中，picked 属性与单选框的值绑定，用户选择的水果会更新 picked 的值，并在段落中显示。

下拉框示例

对于下拉框，v-model 的用法也是一致的：

<div id="app">
  <select v-model="selected">
    <option disabled value="">请选择一个水果</option>
    <option>苹果</option>
    <option>香蕉</option>
    <option>橙子</option>
  </select>
  <p>你选择的水果是：{{ selected }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selected: ''
  }
});
</script>

在这个示例中，用户从下拉列表中选择一个水果，selected 属性自动更新，从而实现双向绑定。

结论

双向绑定是 Vue.js 提供的一项非常强大的功能，通过 v-model 指令，我们可以轻松实现模型与视图之间的同步。例如，用户在输入框中输入内容时，数据会更新；同时，当数据在其他地方发生变化时，输入框的内容也会相应更新。

在下一章，我们将继续探讨数据绑定的另一个重要方面：HTML 属性的绑定。通过这些教程，希望能够帮助你更好地理解 Vue.js 的数据绑定机制，从而提升开发效率。