一文帶你搞懂Vue.js如何實現(xiàn)全選反選功能

更新時間：2025年01月26日 10:27:20 作者：LCG元

這篇文章主要為大家詳細(xì)介紹了Vue.js實現(xiàn)全選反選功能的相關(guān)知識,文中是示例代碼簡潔易懂,具有一定的借鑒價值,有需要的小伙伴可以了解下

實現(xiàn)思路

數(shù)據(jù)綁定：為每個復(fù)選框綁定一個選中狀態(tài)。

全選控制：通過一個復(fù)選框控制所有復(fù)選框的選中狀態(tài)。

反選控制：通過一個按鈕或復(fù)選框切換所有復(fù)選框的選中狀態(tài)。

示例

方案一：基礎(chǔ)實現(xiàn)

<template>
  <div>
    <!-- 全選復(fù)選框 -->
    <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>

方案二：使用計算屬性優(yōu)化

通過計算屬性動態(tài)更新全選狀態(tài)，使代碼更加簡潔和可維護。

<template>
  <div>
    <!-- 全選復(fù)選框 -->
    <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: {
    // 計算全選狀態(tài)
    selectAll: {
      get() {
        // 如果所有項都被選中，返回 true
        return this.items.every((item) => item.selected);
      },
      set(value) {
        // 設(shè)置所有項的選中狀態(tài)
        this.items.forEach((item) => {
          item.selected = value;
        });
      },
    },
  },
  methods: {
    // 反選邏輯
    toggleSelect() {
      this.items.forEach((item) => {
        item.selected = !item.selected;
      });
    },
  },
};
</script>