小选与全选功能实现的一般思路

需求：完成全选与小选互相影响的功能。
图示：

分析：

• 全选影响小选
  1. 先给全选框input添加change监听事件，
  2. 在该事件里通过事件源 e, 执行 e.target获取事件对象，解构出其checked属性，
  3. 遍历数据数组，将该checked属性分别赋值给每一项对应的checked属性 。
• 小选影响全选
  1. 遍历数据数组，利用数组的 every 方法，判断所有小选的checked属性都为true时，将true的结果 return给计算属性名，否则return false
  2. 将计算属性名绑定在全选框input的动态checked属性上面。
     代码：

点击查看代码

<input id="toggle-all" class="toggle-all" type="checkbox" :checked="liAll" @change="allLi" />
  //全选影响小选
  methods：{
    allLi (e) {
          const { checked } = e.target  // e.target 获取事件对象    解构出其checked属性
          this.arr.forEach(item => item.isDone = checked)
    }
  } 
   // 小选影响全选 
  computed: { 
    // 判断数组中所有isDone的属性，当其全为true时，return 结果true给计算属性名,将该计算属性名绑定在表示全选的input框上面。
    liAll () {
      return this.arr.every(item => item.isDone)
    }
  }