vue3语法糖全选反选

在Vue 3中，你可以使用v-model指令和计算属性来实现全选和反选的功能。下面是一个示例：

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全选
    <button @click="toggleSelect">反选</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" :value="item" v-model="selectedItems">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, computed } from 'vue';

export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4'],
      selectedItems: []
    };
  },
  computed: {
    selectAll: {
      get() {
        return this.selectedItems.length === this.items.length;
      },
      set(value) {
        this.selectedItems = value ? [...this.items] : [];
      }
    }
  },
  methods: {
    toggleSelect() {
      this.selectedItems = this.selectedItems.length === this.items.length ? [] : [...this.items];
    }
  }
}
</script>

在这个示例中，我们使用了一个数组`items`来存储所有的选项，并用`selectedItems`数组来存储用户选中的选项。我们使用`v-for`指令来遍历`items`数组，并为每个选项生成一个复选框。

通过使用`v-model`指令和计算属性，我们可以将全选复选框的状态与`selectedItems`数组的长度进行绑定。当`selectedItems`数组中的元素数量等于`items`数组的长度时，全选复选框被选中；否则，全选复选框不被选中。

点击反选按钮时，我们通过判断`selectedItems`数组的长度是否等于`items`数组的长度来决定是否将`selectedItems`数组重置为`items`数组。这样就实现了反选的功能。

希望这个示例对你有帮助！