小选影响全选

1、实现效果

2、准备工作

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox"/>
    <button>反选</button>
    <ul>
      <li>
        <input type="checkbox"/>
        <span>任务名</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  }
};
</script>

 3、把数据循环遍历到页面上并用v-model关联选中的状态（obj.c）

<li v-for="(obj,index) in arr" :key="index">
        <input type="checkbox" v-model="obj.c"/>
        <span>{{obj.name}}</span>
</li>

 4、用v-model关联全选的状态

当遍历发现数组里有没选中的 直接返回false 否则全选勾上

 <input type="checkbox" v-model="isAll"/>

5、全部代码

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="isAll"/>
    <button>反选</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(){
      return this.arr.every(obj=>obj.c===true) 
    }
  }
};
</script>

6、补充知识

every() 方法使用指定函数检测数组中的所有元素：

• 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。
• 如果所有元素都满足条件，则返回 true。

 全选影响小选

1、先获取到全选状态-------计算属性的完整写法 set里先获取到全选框的勾选状态

2、将全选状态同步给所有的小选框-------遍历list数组 将全选框的勾选状态赋给所有小选框（v-model关联的属性）

3、

computed:{
    isAll:{
      set(val){
        this.arr.forEach(obj=>obj.c=val)
      },
      get(){
          return this.arr.every(obj=>obj.c===true) 
      }
     
    }
  }