Vue实现多选框和单选框的方法

在Vue开发中，实现多选框和单选框是常见的需求。下面将详细介绍它们的实现方式。

单选框的实现

创建一个Vue实例，在模板中使用input标签并将其type属性设置为radio来创建单选框。每个单选框都需要有一个唯一的value值，并且它们要共享同一个v-model绑定。

例如：

<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">选项1</label>
    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">选项2</label>
    <p>您选择的是: {{ selectedOption }}</p>
  </div>
</template>

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

在上述代码中，v-model绑定到selectedOption数据属性上。当用户选择一个单选框时，对应的value值会被赋给selectedOption，通过插值表达式{{ selectedOption }}可以显示当前选择的选项。

多选框的实现

多选框的实现与单选框类似，不过input标签的type属性要设置为checkbox。每个多选框都可以独立地被选中或取消选中，它们同样使用v-model进行数据绑定。

示例代码如下：

<template>
  <div>
    <input type="checkbox" id="item1" value="item1" v-model="selectedItems">
    <label for="item1">项目1</label>
    <input type="checkbox" id="item2" value="item2" v-model="selectedItems">
    <label for="item2">项目2</label>
    <p>您选择的项目: {{ selectedItems }}</p>
  </div>
</template>

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

这里v-model绑定到一个数组selectedItems上。当用户选中某个多选框时，其value值会被添加到数组中；取消选中时，value值会从数组中移除。通过在插值表达式中显示selectedItems数组，能直观看到用户选择的所有项目。

掌握Vue中单选框和多选框的实现方法，能极大地提升用户与页面的交互体验，让数据收集和用户选择功能更加流畅、便捷。无论是简单的问卷调查页面，还是复杂的电商筛选功能，这些方法都能发挥重要作用。