06 使用v-model实现双向数据绑定

概述

Vue achieves two-way data binding by creating a dedicated directive that watches a data property within your Vue component. The v-model directive triggers data updates when the target data property is modified on the UI.

Vue 通过创建一个专用指令来观察 Vue 组件中的数据属性，从而实现双向数据绑定。当用户界面上的目标数据属性被修改时，v-model 指令就会触发数据更新。

This directive is usually useful for HTML form elements that need to both display the data and modify it reactively – for example, input, textarea, radio buttons, and so on.

该指令通常适用于既需要显示数据又需要对数据进行反应式修改的 HTML 表单元素，例如输入、文本区域、单选按钮等。

We can enable two-way binding by adding the v-model directive to the target element and binding it to our desired data props:

我们可以在目标元素中添加 v-model 指令，并将其绑定到所需的数据道具，从而启用双向绑定：

<template><input v-model="name"/>
</template>
<script>
export default {data() {return {name: ''}}
}
</script>

In the next exercise, we are going to build a component using Vue’s twoway data binding and experiment with what it means to bind data in two ways.

在下一个练习中，我们将使用 Vue 的双向数据绑定构建一个组件，并尝试以两种方式绑定数据的含义。

练习：双向数据绑定

The context for this type of data model is usually forms or wherever you expect both input and output data. By the end of the exercise, we should be able to utilize the v-model attribute in the context of a form.

这类数据模型的上下文通常是表单或任何需要输入和输出数据的地方。在练习结束时，我们应该能够在表单中使用 v-model 属性。

Create a new Vue component file named Exercise1-04.vue in the src/components directory.

在 src/components 目录中新建一个名为 Exercise1-04.vue 的 Vue 组件文件。

在App.vue中引入该组件并渲染：

<script setup>
import Exercise from "./components/Exercise1-04.vue";
</script>
<template><Exercise/>
</template>

Inside Exercise1-04.vue, start by composing an HTML label and bind an input element to the name data prop using v-model inside the template area:

在 Exercise1-04.vue 中，首先创建一个 HTML 标签，然后在模板区域内使用 v-model 将输入元素与名称数据道具绑定：

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

Complete the binding of the text input by returning a reactive data prop called name in the <script> tag:

在 <script> 标记中返回名为 name 的反应式数据道具，从而完成文本输入的绑定：

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

Next, compose a label and selectable HTML select tied to the language data prop using v-model inside of the template area:

接下来，在模板区域内使用 v 模型编写与语言数据道具绑定的标签和可选 HTML 选项：

<template><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>
</template>

Finish binding the select input by returning a reactive data prop called language in the <script> tag:

在 <script> 标记中返回名为 language 的反应式数据道具，完成选择输入的绑定：

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

Below the form fields, output the name and language inside of an unordered list structure (<ul> and <li>) by using curly braces such as {{ name }}. Your code should look as follows:

在表单字段下方，使用大括号（如 {{ name }}）在无序列表结构（<ul> 和 <li>）中输出名称和语言。您的代码应如下所示：

<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>

Add styling inside the <style> tag at the bottom of the component:

在组件底部的"<style>"标签内添加样式：

<style>
.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;
}.overview > li {list-style: none;
}.overview > li + li {margin-top: 20px;
}
</style>

When you update the data in the form, it should also update the overview area synchronously.

更新表单中的数据时，也应同步更新概览区域。

最终完整代码如下：

<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>
<script>
export default {data() {return {name: '',language: '',}},
}
</script>
<style>
.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;
}.overview > li {list-style: none;
}.overview > li + li {margin-top: 20px;
}
</style>

In this exercise, we used the v-model directive to bind the name and JavaScript-style drop-down selection to our local state’s data. When you modify the data, it will reactively update the DOM elements to which we output its value.

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

Next, we will discuss our v-for directive further and different approaches to handling iterative data collection in Vue.

接下来，我们将进一步讨论 v-for 指令以及在 Vue 中处理迭代数据收集的不同方法。