Vue實(shí)現(xiàn)全選多個(gè)選擇框

更新時(shí)間：2025年01月30日 07:00:36 作者：孫悟空

使用v-model綁定布爾變量實(shí)現(xiàn)全選功能：定義數(shù)組存儲(chǔ)狀態(tài),使用v-for循環(huán)渲染選擇框,綁定狀態(tài)；添加全選復(fù)選框,綁定布爾變量；使用watch監(jiān)聽(tīng)全選復(fù)選框狀態(tài)變化,更新數(shù)組中每一項(xiàng)的狀態(tài)

Vue全選多個(gè)選擇框

可以使用 v-model 來(lái)綁定一個(gè)布爾類(lèi)型的變量來(lái)實(shí)現(xiàn)全選多個(gè)選擇框的功能。

具體步驟

如下：

在data中定義一個(gè)數(shù)組，用來(lái)存儲(chǔ)所有需要選擇的項(xiàng)的狀態(tài)。
在模板中使用 v-for 指令循環(huán)渲染每個(gè)選擇框，并將每個(gè)選擇框的狀態(tài)綁定到數(shù)組中對(duì)應(yīng)的項(xiàng)上。
在模板中添加一個(gè)全選復(fù)選框，將其狀態(tài)綁定到一個(gè)布爾類(lèi)型的變量上。
使用 watch 監(jiān)聽(tīng)全選復(fù)選框的狀態(tài)變化，當(dāng)全選復(fù)選框的狀態(tài)改變時(shí)，遍歷數(shù)組中的每一項(xiàng)，將其狀態(tài)設(shè)置為全選復(fù)選框的狀態(tài)即可。

示例代碼

<template>
  <div>
    <input type="checkbox" v-model="selectAll"> 全選
    <div v-for="(item, index) in items" :key="index">
      <input type="checkbox" v-model="item.checked"> {{ item.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectAll: false,
      items: [
        { label: '選項(xiàng)1', checked: false },
        { label: '選項(xiàng)2', checked: false },
        { label: '選項(xiàng)3', checked: false },
      ],
    };
  },
  watch: {
    selectAll(val) {
      this.items.forEach(item => {
        item.checked = val;
      });
    },
  },
};
</script>

在上面的代碼中，我們定義了一個(gè) selectAll 變量來(lái)表示全選復(fù)選框的狀態(tài)，一個(gè) items 數(shù)組來(lái)存儲(chǔ)所有需要選擇的項(xiàng)的狀態(tài)。

在模板中，使用 v-for 指令循環(huán)渲染每個(gè)選擇框，并將每個(gè)選擇框的狀態(tài)綁定到數(shù)組中對(duì)應(yīng)的項(xiàng)上。同時(shí)，還添加了一個(gè)全選復(fù)選框，并將其狀態(tài)綁定到 selectAll 變量上。

在 watch 中，監(jiān)聽(tīng) selectAll 變量的變化，當(dāng)它的狀態(tài)改變時(shí)，遍歷 items 數(shù)組中的每一項(xiàng)，將其狀態(tài)設(shè)置為 selectAll 的狀態(tài)即可實(shí)現(xiàn)全選功能。