本文例項為大家分享了實現全選功能的具體程式碼，供大家參考，具體內容如下

全選思路

1、準備標籤,樣式,準備資料

2、將資料迴圈展示在頁面上,在li 裡v-for

3、在全選框 v-model = "isAll" //總的狀態

4、小選框 v-model = "" //單個的狀態

5、小選影響全選 ... 定義計算屬性 isAll 統計小選框的狀態,every查詢數組裡不符合條件的,直接返回false ...判斷每一個小選框的狀態,只要有一個小選框的狀態不為true 就是沒有被勾上,那就返回false,全選框的狀態就是false

6、全選影響小選... set(val) 設定全選的狀態aCKfV(true/false)...然後就遍歷每個小選框看小選框的狀態,讓它的狀態改為val全選的狀態

<template>
  <div>
    <span>全選:</span>
    <input type="checkbox" v-model="isAll" />
    <button @click="btn">反選</button>
    <ul>
      <li v-for="(obj,index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c" />
        <span>{{ obj.name }}</span>
      </li>
    </ul>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "豬八戒",c: false,},www.cppcns.com
 
      {
          name: "孫悟空",{
          name: "唐僧",{
          namehttp://www.cppcns.com: "白龍馬",],};
  },computed: {
    isAll: {
      //全選影響小選
      set(val) {
        //set(val) 設定全選的狀態(true/ false)
        //我們手動設定了全選框的狀態,就遍歷數組裡的每個物件的c屬性,也就是遍歷看每個小選框的狀態,讓它的狀態改為 val 全選框的狀態
        this.arr.forEach((obj) => (obj.c = val));
      },//小選框影響全選框
      get() {
        //判斷數組裡的每一個物件的c屬性 它是不是等於true,就是判斷每一個小選框的狀態,全選框的狀態就是false
        // every口訣: 查詢數組裡"不符合"條件,直接原地返回false
        return this.arr.every((obj) => obj.c === true);
      },methods: {
    btn() {
      //實現反選
      //遍歷數組裡的每一項,讓數組裡物件的c屬性取反再賦值回去
      this.arr.forEach((obj) => (obj.c = !obj.c));
    },};
</script>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。