Vue 中表单组件的双向数据绑定详解

在 Vue 应用中，表单组件是非常常见的元素，例如 <input>、<radio>、<textarea>、<checkbox> 和 <select> 等，它们用于收集用户的输入信息。Vue 提供了双向数据绑定机制，使得开发者可以轻松地将表单组件的值与 Vue 实例中的数据进行关联。本文将详细介绍如何在 Vue 中使用这些表单组件，并实现双向数据绑定。

<input> 输入框

在 Vue 中，可以使用 v-model 指令将 <input> 输入框的值与 Vue 实例中的数据进行双向绑定。例如：

<template>
  <div>
    <input type="text" v-model="message">
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

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

在上面的示例中，<input> 输入框中的值会与 message 数据属性进行双向绑定，当输入框中的值发生变化时，message 中的数据也会同步更新。

<radio> 单选框

对于 <radio> 单选框，可以使用 v-model 指令将选中的值与 Vue 实例中的数据进行双向绑定。例如：

<template>
  <div>
    <input type="radio" value="male" v-model="gender"> 男
    <input type="radio" value="female" v-model="gender"> 女
    <p>选中的性别是：{{ gender }}</p>
  </div>
</template>

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

在上面的示例中，两个 <input> 单选框的选中值会与 gender 数据属性进行双向绑定，当其中一个单选框被选中时，gender 中的数据也会同步更新。

<textarea> 文本域

与 <input> 类似，<textarea> 文本域也可以使用 v-model 指令进行双向数据绑定。例如：

<template>
  <div>
    <textarea v-model="message"></textarea>
    <p>输入的内容是：{{ message }}</p>
  </div>
</template>

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

在这个示例中，文本域中的值会与 message 数据属性进行双向绑定，当文本域中的内容发生变化时，message 中的数据也会同步更新。

<checkbox> 复选框

对于 <checkbox> 复选框，我们可以使用 v-model 指令将复选框的选中状态与 Vue 实例中的布尔值进行双向绑定。每个复选框都与一个布尔值相关联，当选中时，这个布尔值为 true，当未选中时，为 false。选中的值将会保存在一个数组中。例如：

<template>
  <div>
    <input type="checkbox" id="option1" value="option1" v-model="selectedOptions">
    <label for="option1">选项一</label><br>
    <input type="checkbox" id="option2" value="option2" v-model="selectedOptions">
    <label for="option2">选项二</label><br>
    <input type="checkbox" id="option3" value="option3" v-model="selectedOptions">
    <label for="option3">选项三</label><br>
    <p>选中的选项是：{{ selectedOptions }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOptions: []
    };
  }
};
</script>

在上面的代码中，首先创建了三个复选框，每个复选框都有一个不同的值（option1、option2 和 option3），并且它们都与 selectedOptions 数组进行双向绑定。当用户选中一个复选框时，它的值将被添加到 selectedOptions 数组中；当用户取消选中一个复选框时，它的值将从selectedOptions 数组中移除

<select> 下拉框

对于 <select> 下拉框，我们同样可以使用 v-model 指令将选中的值与 Vue 实例中的数据进行双向绑定。例如：

<template>
  <div>
    <select v-model="selectedOption">
      <option value="option1">选项一</option>
      <option value="option2">选项二</option>
      <option value="option3">选项三</option>
    </select>
    <p>选中的选项是：{{ selectedOption }}</p>
  </div>
</template>

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

在上面的示例中，下拉框中选中的值会与 selectedOption 数据属性进行双向绑定，当下拉框中的选项发生变化时，selectedOption 中的数据也会同步更新。

结尾

通过 v-model 指令可以非常方便地实现 Vue 中表单组件的双向数据绑定。无论是输入框、单选框、文本域、复选框还是下拉框，都可以轻松与 Vue 实例中的数据进行关联，从而实现更灵活、更方便的表单处理。

原文链接：https://juejin.cn/post/7344164779629936666 作者：慕仲卿