vue3语法糖全选反选

在Vue 3中，可以使用语法糖来实现全选和反选的功能。下面是一个简单的示例：

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

<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { id: 1, name: 'Item 1', selected: false },
        { id: 2, name: 'Item 2', selected: false },
        { id: 3, name: 'Item 3', selected: false }
      ]
    };
  },
  methods: {
    toggleSelectAll() {
      this.items.forEach(item => {
        item.selected = this.selectAll;
      });
    }
  }
};
</script>

在上述示例中，我们使用了`v-model`指令来实现双向绑定，`selectAll`变量控制全选复选框的选中状态，`items`数组中的每个项目都有一个`selected`属性来控制对应复选框的选中状态。

当全选复选框的状态改变时，`toggleSelectAll`方法会被调用，遍历`items`数组并更新每个项目的`selected`属性，从而实现全选和反选的功能。

请注意，这只是一个简单的示例，实际应用中可能需要根据具体需求进行适当的调整。