vue3实现简单的单选、多选、全选

在Vue 3中实现单选、多选、全选功能，通常我们会使用模板语法和v-model指令结合计算属性来完成。以下是实现这些功能的基本思路和代码示例。

1. 单选功能：
单选通常意味着在一组选项中只能选择一个。我们可以用一个数组来存储被选中的项，并通过v-model指令将输入与数据进行双向绑定。

<template>
  <div>
    <div v-for="item in options" :key="item.value">
      <input type="radio" :value="item.value" v-model="selected">
      <label>{{ item.text }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: '', // 默认没有选项被选中
      options: [
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' },
        { value: 'option3', text: '选项3' }
      ]
    };
  }
};
</script>

2. 多选功能：
多选意味着用户可以同时选择多个选项。和单选类似，我们可以用数组来存储被选中的项，不同之处在于可以使用`checkbox`类型的输入元素，并且通过`v-model`与数组进行双向绑定。

<template>
  <div>
    <div v-for="item in options" :key="item.value">
      <input type="checkbox" :value="item.value" v-model="selected">
      <label>{{ item.text }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: [], // 默认为空数组，表示没有选项被选中
      options: [
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' },
        { value: 'option3', text: '选项3' }
      ]
    };
  }
};
</script>

3. 全选功能：
全选功能通常结合多选使用，可以在多选的基础上添加一个全选的复选框。全选复选框的状态会影响其他复选框的状态。

<template>
  <div>
    <input type="checkbox" v-model="isAllSelected"> 全选
    <div v-for="item in options" :key="item.value">
      <input type="checkbox" :value="item.value" v-model="selected">
      <label>{{ item.text }}</label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAllSelected: false,
      selected: [],
      options: [
        { value: 'option1', text: '选项1' },
        { value: 'option2', text: '选项2' },
        { value: 'option3', text: '选项3' }
      ]
    };
  },
  watch: {
    selected(newVal) {
      // 当非全选项改变时，保持全选项状态
      this.isAllSelected = this.selected.length === this.options.length;
    },
    isAllSelected(newVal) {
      if (newVal) {
        // 如果全选被选中，设置selected为options的值
        this.selected = this.options.map(item => item.value);
      } else {
        // 如果全选被取消选中，清空selected数组
        this.selected = [];
      }
    }
  }
};
</script>