一文带你搞懂Vue.js如何实现全选反选功能

<template>
  <div>
    <!-- 全选复选框 -->
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
    <span>全选</span>
    <!-- 选项列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.selected" />
        {
  
  { item.text }}
      </li>
    </ul>
    <!-- 反选按钮 -->
    <button @click="toggleSelect">反选</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { text: 'Item 1', selected: false },
        { text: 'Item 2', selected: false },
        { text: 'Item 3', selected: false },
      ],
    };
  },
  methods: {
    // 全选逻辑
    toggleSelectAll() {
      this.items.forEach((item) => {
        item.selected = this.selectAll;
      });
    },
    // 反选逻辑
    toggleSelect() {
      this.items.forEach((item) => {
        item.selected = !item.selected;
      });
    },
  },
};
</script>

<template>
  <div>
    <!-- 全选复选框 -->
    <input type="checkbox" v-model="selectAll" />
    <span>全选</span>
    <!-- 选项列表 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <input type="checkbox" v-model="item.selected" />
        {
  
  { item.text }}
      </li>
    </ul>
    <!-- 反选按钮 -->
    <button @click="toggleSelect">反选</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      items: [
        { text: 'Item 1', selected: false },
        { text: 'Item 2', selected: false },
        { text: 'Item 3', selected: false },
      ],
    };
  },
  computed: {
    // 计算全选状态
    selectAll: {
      get() {
        // 如果所有项都被选中，返回 true
        return this.items.every((item) => item.selected);
      },
      set(value) {
        // 设置所有项的选中状态
        this.items.forEach((item) => {
          item.selected = value;
        });
      },
    },
  },
  methods: {
    // 反选逻辑
    toggleSelect() {
      this.items.forEach((item) => {
        item.selected = !item.selected;
      });
    },
  },
};
</script>