使用 v-model 实现双向绑定

在前端开发中，处理用户输入是最复杂的任务之一，因为即使只是将用户输入的内容显示在网页的另一部分，也需要经过多个步骤。这些步骤涉及一系列按顺序触发的事件。Vue 通过将数据变量直接绑定到用户输入，使获取用户输入变得简单直观。当用户输入数据时，Vue 会自动更新相关变量的值。在本课程中，你将学习 Vue 相较于原生 JavaScript 如何更轻松地实现这一功能。

v-model 指令

v-model 指令用于将任意变量绑定到用户输入。它实现了数据与表单输入元素之间的响应式绑定，这意味着只要输入发生任何变化，数据就会立即更新。

我们将为每种表单输入元素提供一个动手实践示例。

文本输入

当用户需要输入简短文本（如姓名或电子邮件地址）时，使用文本输入。<input> 元素用于文本输入。以下是一个可执行示例，展示了响应式数据绑定的实际效果。不仅接收用户的输入，还显示下方文本框中的变量 name。

在上述示例中，请注意第 7 行的插值显示了 name 的当前状态。每当输入一个字符，name 变量就会立即更新，而插值则利用 Vue.js 的响应式系统展示最新的值。

注意： 内部上，v-model 使用不同的属性并触发不同的事件来保持数据同步。它本质上是一种语法糖，为开发者提供了更高层次的抽象，简化了操作。

多行文本输入

较长的文本输入可能需要用户输入多行内容。<textarea> 元素用于接收多行输入。v-model 支持 <textarea> 来存储多行字符串。以下是使用 v-model 与 <textarea> 的可执行示例。

white-space CSS 属性定义了文本内容的换行方式。将其设置为 pre-line 时，会保留输入文本中的实际换行符。否则，换行符将被忽略，文本将显示为一行连续内容。

复选框

复选框绑定到一个布尔值，其真假由复选框的状态决定。当复选框被选中时，该布尔值为 true，否则为 false。以下是一个可执行示例，展示了复选框的使用方法。

对于多个复选框，应将其绑定到数组而非布尔值。此时，所有被选中的值都会被推入数组。以下是将多个复选框绑定到数组的可执行示例。

单选按钮

单选按钮用于从多个选项中选择一个。因此，它绑定到一个单一变量。以下是一个可执行示例，展示了单选按钮与 v-model 的联动效果。

选择列表

选择列表包含下拉菜单中的多个项目，但每次只能选择一项。选择列表使用 <select> 标签配合 <option> 标签来显示选项，而不是 <input> 标签。所有选项都绑定到一个字符串变量。以下是一个可执行示例，展示了选择列表与 v-model 的结合使用。

与复选框类似，也可以选择多个列表项。此时，列表项将绑定到数组而非字符串。在 <select> HTML 元素中使用 multiple 属性即可实现多选。以下是一个支持多选的可执行示例。