使用 v-model 的双向绑定

Vue 通过创建专门监视 Vue 组件内部数据属性的指令，简化了实现双向数据绑定的方法。 当 Vue 正在观察的绑定数据属性发生变化时，Vue 指令 v-model 将做出响应性改变。该指令通常对于需要显示数据并响应式修改数据的 HTML 表单元素很有用，例如输入、文本区域、单选按钮等。

双向绑定是通过将 v-model 指令添加到要绑定的元素并引用 data 属性来实现的：

<template>
    <input v-model="name" />
</template>

<script>
export default {
    data() {
        return {
            name: ''
        }
    }
}
</script>

图 1.23 表示运行上述代码生成的输出：

image 2023 10 11 15 35 08 461
Figure 1. Figure 1.23: Output for the v-model example

请小心使用此指令，因为以这种方式绑定大量数据可能会影响应用程序的性能。考虑您的 UI 并将其拆分为不同的 Vue 组件或视图。本地状态中的 Vue 数据是可变的，可以在模板中的任何位置重新定义。

练习 1.07：使用 v-model 进行双向绑定

我们将使用 Vue 的双向数据绑定属性 v-model 构建一个组件。想想以双向方式绑定一条数据意味着什么。这种形式的数据模型的上下文通常是表单，或者是您期望输入和输出数据的地方。练习结束时，我们应该能够在表单上下文中使用 v-model 属性。

要访问本练习的代码文件，请访问 https://packt.live/2IILld8 。

  1. 打开命令行终端，导航到 Exercise1.07 文件夹，然后按顺序运行以下命令：

    > cd Exercise1.07/
> code .
> yarn
> yarn serve

    转到 https://localhost:8080 。

  2. 首先在模板区域内使用 v-model 编写绑定到 name data 属性的 HTML 标签和输入元素：

    <div class="form">
    <label>
    Name
    <input type="text" v-model="name" />
    </label>
</div>

  3. 通过在 <script> 标记中返回名为 name 的响应式数据属性来完成文本输入的绑定：

    <script>
export default {
    data() {
        return {
            name: '',
        }
    },
}
</script>

  4. 在模板区域内使用 v-model 制作与数据属性 language 绑定的标签和可选 HTML 列表：

    <div class="form">
    <label>
        Name
        <input type="text" v-model="name" />
    </label>
    <label>
        Preferred javascript style
        <select name="language" v-model="language">
            <option value="Javascript">JavaScript</option>
            <option value="TypeScript">TypeScript</option>
            <option value="CoffeeScript">CoffeeScript</option>
            <option value="Dart">Dart</option>
        </select>
    </label>
</div>

  5. 在 <script> 标记中返回名为 language 的响应式数据属性，完成选择输入的绑定：

    <script>
export default {
    data() {
        return {
            name: '',
            language: '',
        }
    },
}
</script>

  6. 在表单字段下方，使用大括号输出无序列表结构（<ul> 和 <li>）内的名称和语言，例如 {{ name }}：

    将表单和显示区域包含在另一个标签（例如 <section> 标签）中，因为模板的根目录只能有一个 HTML 元素。

    您的代码应如下所示：

    <template>
    <section>
        <div class="form">
            <label>
                Name
                <input type="text" v-model="name" />
            </label>
            <label>
                Preferred javascript style
                <select name="language" v-model="language">
                <option value="Javascript">JavaScript</option>
                <option value="TypeScript">TypeScript</option>
                <option value="CoffeeScript">CoffeeScript</option>
                <option value="Dart">Dart</option>
                </select>
            </label>
        </div>
        <ul class="overview">
            <li><strong>Overview</strong></li>
            <li>Name: {{ name }}</li>
            <li>Preference: {{ language }}</li>
        </ul>
    </section>
</template>

  7. 在组件底部的 <style> 标记内添加样式，并将 lang 属性设置为 scss：

    <style lang="scss">
.form {
  display: flex;
  justify-content: space-evenly;
  max-width: 800px;
  padding: 40px 20px;
  border-radius: 10px;
  margin: 0 auto;
  background: #ececec;
}

.overview {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  max-width: 300px;
  margin: 40px auto;
  padding: 40px 20px;
  border-radius: 10px;
  border: 1px solid #ececec;

  > li {
    list-style: none;
    + li {
      margin-top: 20px;
    }
  }
}
</style>

您的输出应如下所示：

image 2023 10 11 15 56 01 573
Figure 2. Figure 1.24: Displaying the final form after the data is updated

你的表格应该看起来像这样。当您更新表单中的数据时，它也应该同步更新概览区域。

在本练习中，我们使用 v-model 指令将名称和 JavaScript-style 下拉选择绑定到本地状态的数据。当您更改数据时，它会响应性地更新我们将此绑定数据输出到的 DOM 元素。