vue3实现全选反选功能

在 Vue 3 中实现全选反选功能，可以使用 `v-model` 指令绑定一个布尔值来实现全选和反选的状态切换。具体实现步骤如下：

1. 在 data 中定义一个数组 `items`，用来存储需要全选反选的选项列表。

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false },
        { id: 3, name: '选项3', checked: false }
      ],
      allChecked: false // 全选状态，默认为未选中
    }
  }
}
</script>

2. 在模板中使用 `v-for` 循环渲染出所有选项，并使用 `v-model` 绑定每个选项的 `checked` 属性。

<template>
  <div>
    <label>
      <input type="checkbox" v-model="allChecked" @change="selectAll">
      全选
    </label>
    <div v-for="item in items" :key="item.id">
      <label>
        <input type="checkbox" v-model="item.checked" @change="checkItem">
        {{ item.name }}
      </label>
    </div>
  </div>
</template>

3. 实现全选和反选的方法。

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '选项1', checked: false },
        { id: 2, name: '选项2', checked: false },
        { id: 3, name: '选项3', checked: false }
      ],
      allChecked: false // 全选状态，默认为未选中
    }
  },
  methods: {
    // 全选/取消全选
    selectAll() {
      this.items.forEach(item => item.checked = this.allChecked)
    },
    // 单个选项被选中/取消选中
    checkItem() {
      this.allChecked = this.items.every(item => item.checked)
    }
  }
}
</script>

在 `selectAll` 方法中，遍历 `items` 数组，将每个选项的 `checked` 属性设置为 `allChecked` 的值，这样就实现了全选和取消全选的功能。

在 `checkItem` 方法中，判断当前是否所有的选项都被选中，如果是，则将 `allChecked` 的值设置为 `true`，否则设置为 `false`，这样就实现了反选的功能。

这样，我们就完成了 Vue 3 中全选反选的实现。