vue3复选框的全选和反选

Vue3中实现复选框的全选和反选功能可以通过以下步骤实现：

1. 在data中定义一个allChecked变量，用于表示是否全选。
2. 在data中定义一个testList数组，用于存储需要进行全选和反选的数据。
3. 在created钩子函数中，对testList数组中的每个元素添加一个isChecked属性，用于表示该元素是否被选中。
4. 在watch中监听testList数组的变化，当testList数组中的元素被选中或取消选中时，判断是否全部选中，如果全部选中，则将allChecked变量设置为true，否则设置为false。
5. 在methods中定义handleAllChecked方法，用于实现全选和反选功能。该方法接收一个参数v，用于表示是否全选。当v为true时，将testList数组中的每个元素的isChecked属性设置为true，否则设置为false。
6. 在methods中定义handleChecked方法，用于处理单个复选框的选中状态。该方法接收两个参数，item表示当前选中的元素，e表示当前元素的选中状态。当e为true时，将item的isChecked属性设置为true，否则设置为false。

下面是示例代码：

<template>
  <div>
    <input type="checkbox" v-model="allChecked" @change="handleAllChecked($event.target.checked)">全选
    <div v-for="(item, index) in testList" :key="index">
      <input type="checkbox" v-model="item.isChecked" @change="handleChecked(item, $event.target.checked)">
      {{ item.id }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      allChecked: false,
      testList: [
        { id: 1, isChecked: false },
        { id: 2, isChecked: false },
        { id: 3, isChecked: false },
        { id: 4, isChecked: false },
        { id: 5, isChecked: false }
      ]
    }
  },
  watch: {
    testList: {
      handler (val) {
        let i = 0
        val.forEach(item => {
          if (item.isChecked === true) {
            i++
          }
        })
        if (i === val.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      deep: true
    }
  },
  methods: {
    handleAllChecked (v) {
      this.testList.forEach(item => {
        item.isChecked = v
      })
    },
    handleChecked (item, e) {
      item.isChecked = e
    }
  }
}
</script>