vue中一维数组的全选、全不选、反选（图文示例）

<template>
  <div>
    <div>
      <button @click="selectAll">全选</button>
      <button @click="selectNone">全不选</button>
      <button @click="toggleSelect">反选</button>
    </div>
    <div>
      <div v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.checked" />
        <label>{{ item.name }}</label>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { name: '选项1', checked: false },
        { name: '选项2', checked: false },
        { name: '选项3', checked: false },
        // ...更多选项
      ]
    };
  },
  methods: {
    selectAll() {
      this.items.forEach(item => {
        item.checked = true;
      });
    },
    selectNone() {
      this.items.forEach(item => {
        item.checked = false;
      });
    },
    toggleSelect() {
      this.items.forEach(item => {
        item.checked = !item.checked;
      });
    }
  }
};
</script>

这个例子中，我们定义了一个名为items的一维数组，其中包含多个对象，每个对象代表一个可选项，并拥有一个checked属性来跟踪该项是否被选中。在模板中，我们使用v-for指令来循环显示每个选项，并使用v-model指令来创建双向数据绑定，使得用户的选择能够反映在items数组中的对应项的checked属性上。在methods对象中，我们定义了三个函数来处理全选、全不选和反选的逻辑。这些函数被绑定到按钮的点击事件上，以便在用户触发相应操作时执行。