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

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

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

實(shí)現(xiàn)思路

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

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

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

示例

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

<template>
  <div>
    <!-- 全選復(fù)選框 -->
    <input type="checkbox" v-model="selectAll" @change="toggleSelectAll" />
    <span>全選</span>
    <!-- 選項(xiàng)列表 -->
    <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>

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

通過計(jì)算屬性動(dòng)態(tài)更新全選狀態(tài)，使代碼更加簡(jiǎn)潔和可維護(hù)。

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