<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,
        },
        {
          name: "孫悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龍馬",
          c: false,
        },
      ],
    };
  },
  computed: {
    isAll: {
      //全選影響小選
      set(val) {
        //set(val) 設置全選的狀態(tài)(true/ false)
        //我們手動設置了全選框的狀態(tài),就遍歷數(shù)組里的每個對象的c屬性, 也就是遍歷看每個小選框的狀態(tài),讓它的狀態(tài)改為 val 全選框的狀態(tài)
        this.arr.forEach((obj) => (obj.c = val));
      },
      //小選框影響全選框
      get() {
        //判斷數(shù)組里的每一個對象的c屬性 它是不是等于true, 就是判斷每一個小選框的狀態(tài), 只要有一個小選框的狀態(tài)不為true 就是沒有被勾上, 那就返回false , 全選框的狀態(tài)就是false
        // every口訣: 查找數(shù)組里"不符合"條件, 直接原地返回false
        return this.arr.every((obj) => obj.c === true);
      },
    },
  },
  methods: {
    btn() {
      //實現(xiàn)反選
      //遍歷數(shù)組里的每一項,  讓數(shù)組里對象的c屬性取反再賦值回去
      this.arr.forEach((obj) => (obj.c = !obj.c));
    },
  },
};
</script>