1. 单行文本输入框
代码案例：
<template> <div> <input type="text" v-model="textValue" /> <p>输入的值: {{ textValue }}</p > </div> </template> <script> export default { data() { return { textValue: "" }; } }; </script>
代码运行结果和代码分析：
以上代码展示了如何使用Vue绑定单行文本输入框。
在<input>元素上，使用v-model指令将输入框的值与textValue数据属性进行双向绑定。这意味着当输入框的值改变时，textValue也会自动更新；反过来，当textValue的值改变时，输入框的值也会自动更新。
在<p>元素中，显示了当前输入的值，通过插值表达式{{ textValue }}将textValue的值输出到页面上。
2 多行文本输入框
代码案例：
<template> <div> <textarea v-model="textareaValue"></textarea> <p>输入的值: {{ textareaValue }}</p > </div> </template> <script> export default { data() { return { textareaValue: "" }; } }; </script>
代码运行结果和代码分析：
以上代码展示了如何使用Vue绑定多行文本输入框。
在<textarea>元素上，同样使用v-model指令将文本域的值与textareaValue数据属性进行双向绑定。
在<p>元素中，显示了当前输入的值，通过插值表达式{{ textareaValue }}将textareaValue的值输出到页面上。
3 复选框
代码案例：
<template> <div> <input type="checkbox" v-model="isChecked" /> <label>{{ label }}</label> </div> </template> <script> export default { data() { return { isChecked: false, label: "选择框未选中" }; }, watch: { isChecked() { this.label = this.isChecked ? "选择框已选中" : "选择框未选中"; } } }; </script>
代码运行结果和代码分析：
以上代码展示了如何使用Vue绑定复选框。
在<input>元素上，使用v-model指令将复选框的选中状态与isChecked数据属性进行双向绑定。
在<label>元素中，通过插值表达式{{ label }}创建动态文本，显示复选框的状态。
通过使用watch选项，我们可以监视isChecked的变化。当复选框的状态改变时，watch中的函数会自动调用。我们通过修改label的值来更新显示的文本。
4 单选按钮
代码案例：
<template> <div> <input type="radio" id="option1" value="option1" v-model="selectedOption" /> <label for="option1">选项1</label> <br> <input type="radio" id="option2" value="option2" v-model="selectedOption" /> <label for="option2">选项2</label> <br> <input type="radio" id="option3" value="option3" v-model="selectedOption" /> <label for="option3">选项3</label> <br> <p>选择的值: {{ selectedOption }}</p > </div> </template> <script> export default { data() { return { selectedOption: "" }; } }; </script>
代码运行结果和代码分析：
以上代码展示了如何使用Vue绑定单选按钮。
在每个<input>元素上，使用相同的v-model指令将单选按钮的值与selectedOption数据属性进行绑定。每个单选按钮都有一个独立的value属性，可以通过它们来表示不同的选项。
使用label标签将每个单选按钮与其相应的描述文本关联起来，在<label>元素上使用for属性指定与之关联的<input>元素的id。
在<p>元素中，通过插值表达式{{ selectedOption }}显示选择的值。
5. 选择框
选择框是表单中常见的一种输入方式，Vue提供了v-model指令来实现选择框的数据绑定。
代码案例：
<div id="app"> <label for="fruit">选择你喜欢的水果：</label> <select id="fruit" v-model="selectedFruit"> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> <p>你选择的水果是：{{ selectedFruit }}</p > </div>
代码运行结果：
选择你喜欢的水果： 苹果 香蕉 橙子 你选择的水果是：（根据选择的果实展示不同的结果）
代码分析：
在上述代码中，我们通过v-model指令将选择框与data中的selectedFruit属性进行了双向绑定。
当用户选择一个选项时，selectedFruit的值会更新，页面上展示的结果也会相应更新。
6. 值绑定
在Vue中，我们可以通过值绑定的方式，将选项的值与data中的属性进行绑定。
6.1 复选框:
复选框是一种常见的表单元素，Vue提供了v-model指令来实现复选框的值绑定。
代码案例：
<div id="app"> <label for="apple">苹果：</label> <input type="checkbox" id="apple" v-model="fruits" value="apple"> <br> <label for="banana">香蕉：</label> <input type="checkbox" id="banana" v-model="fruits" value="banana"> <br> <label for="orange">橙子：</label> <input type="checkbox" id="orange" v-model="fruits" value="orange"> <br> <p>你选择的水果是：{{ fruits }}</p > </div>
代码运行结果：
苹果： 香蕉： 橙子： 你选择的水果是：（根据选择的水果展示不同的结果）
代码分析：
在上述代码中，我们通过v-model指令将复选框与data中的fruits属性进行了值绑定，fruits是一个数组类型的属性。
当用户选择一个复选框时，选中的水果的值会添加到fruits数组中，反之，若取消选择，则对应的值会从数组中删除。
6.2 单选按钮:
单选按钮也是一种常见的表单元素，Vue提供了v-model指令来实现单选按钮的值绑定。
代码案例：
<div id="app"> <label for="male">男性：</label> <input type="radio" id="male" v-model="gender" value="male"> <br> <label for="female">女性：</label> <input type="radio" id="female" v-model="gender" value="female"> <br> <label for="other">其他：</label> <input type="radio" id="other" v-model="gender" value="other"> <br> <p>你的性别是：{{ gender }}</p > </div>
代码运行结果：
男性：
女性：
其他：
你的性别是：（根据选择的性别展示不同的结果）
代码分析：
在上述代码中，我们通过v-model指令将单选按钮与data中的gender属性进行了值绑定。
当用户选择一个单选按钮时，gender的值会更新，页面上展示的结果也会相应更新。
6.3 选择框的选项:
在Vue中，我们可以将选择框的选项存储在一个数组中，并通过v-for指令来渲染选项列表。
代码案例：
<div id="app"> <label for="fruit">选择你喜欢的水果：</label> <select id="fruit" v-model="selectedFruit"> <option v-for="fruit in fruits" :value="fruit">{{ fruit }}</option> </select> <p>你选择的水果是：{{ selectedFruit }}</p > </div>
代码运行结果：
选择你喜欢的水果： （根据数组fruits中的值动态渲染选项） 你选择的水果是：（根据选择的水果展示不同的结果）
代码分析：
在上述代码中，我们通过v-for指令遍历fruits数组，使用:value绑定fruit作为选项的值，并在option标签中使用{{ fruit }}来显示选项的文本内容。
当用户选择一个选项时，selectedFruit的值会更新，页面上展示的结果也会相应更新。
7. 实例: 用户注册
在这个实例中，我们将应用之前学习的表单输入绑定知识来构建一个用户注册表单。
代码案例：
<div id="app"> <form @submit.prevent="submitForm"> <label for="username">用户名：</label> <input type="text" id="username" v-model="username"> <br> <label for="password">密码：</label> <input type="password" id="password" v-model="password"> <br> <button type="submit">注册</button> </form> </div>
代码运行结果：
用户名：（输入用户名） 密码：（输入密码） [注册按钮]
代码分析：
在上述代码中，我们使用v-model指令将input元素与data中的username和password进行了双向绑定，这样用户在输入表单时，数据会及时更新。
使用@submit.prevent来阻止表单默认的提交行为，然后调用submitForm方法进行表单的提交逻辑处理。
8. 小结
本章我们学习了Vue中表单输入绑定的相关内容，包括选择框的实现、值绑定、复选框、单选按钮和选择框的选项的渲染，以及一个用户注册表单的实例。这对我们开发交互丰富的用户界面来说非常重要。通过灵活应用这些知识，我们能够更好地满足用户的需求。
