vue使用计算属性实现全选和反选

<template>
  <div>
    <p>
      <span>全选</span><input type="checkbox" v-model="isAll">
      <button @click="fanFn">反选</button>
    </p>

    <ul >
      <li v-for="(item,index) in arr" :key="index">
        <input type="checkbox" v-model="item.check">
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr:[
        {
          name:'猪八戒',
          check:false
        },
        {
          name:'孙悟空',
          check:false
        },
        {
          name:'唐僧',
          check:false
        },
        {
          name:'白龙马',
          check:false
        }
      ]
    }
  },
  methods: {
    fanFn() {
      this.arr.forEach(obj => obj.check = !obj.check)
    }
  },
  computed: {
    isAll: {
      set(val) {
        // 把全选框的状态赋予给每个对象  -> 间接影响小选框状态
        this.arr.forEach(obj => obj.check = val)
      },
      get() {   // 获取isAll的值来影响全选状态
        // 统计所有小选框里,是否有未选中,如果有直接返回false
        // 口诀: every()  找到第一个不符合条件的,直接返回false
        return this.arr.every(obj => obj.check == true)
      }
    }
  }
}
</script>

<style>

</style>