做一个简单的vue3全选

在Vue 3中，实现一个全选功能通常需要以下几个步骤：

1. 创建一个组件，其中包含一个列表和一个全选复选框。
2. 为全选复选框绑定一个数据属性，比如`isAllChecked`，用来表示是否所有列表项都被选中。
3. 为每个列表项的复选框绑定同一个数据属性，同时使用`.sync`修饰符来实现父子组件之间的双向数据绑定。
4. 使用计算属性来控制全选复选框的选中状态，使其根据列表项复选框的选中状态自动更新。
5. 在列表项复选框的`v-model`指令中使用计算属性，以便根据全选复选框的选中状态更新列表项的选中状态。

以下是一个简单的示例代码：

<template>
  <div>
    <input type="checkbox" v-model="isAllChecked" @change="handleCheckAllChange">
    <span>全选</span>
    <div>
      <div v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.isChecked">
        <label>{{ item.text }}</label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, text: '选项1', isChecked: false },
        { id: 2, text: '选项2', isChecked: false },
        // 更多选项...
      ],
      isAllChecked: false
    };
  },
  computed: {
    allChecked() {
      return this.list.every(item => item.isChecked);
    }
  },
  methods: {
    handleCheckAllChange() {
      this.list.forEach(item => {
        item.isChecked = this.isAllChecked;
      });
    }
  }
};
</script>

在这个示例中，`isAllChecked`是全选复选框的数据属性，`list`是一个包含多个对象的数组，每个对象代表一个列表项，包含`id`、`text`和`isChecked`属性。全选复选框的状态会根据`allChecked`计算属性来确定，该属性会检查所有列表项的选中状态是否全部为真。当全选复选框被选中或取消选中时，`handleCheckAllChange`方法会更新所有列表项的`isChecked`状态。