表单输入绑定

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中表单输入绑定的相关内容，包括选择框的实现、值绑定、复选框、单选按钮和选择框的选项的渲染，以及一个用户注册表单的实例。这对我们开发交互丰富的用户界面来说非常重要。通过灵活应用这些知识，我们能够更好地满足用户的需求。