vue 小案例-01 使用计算属性computed实现勾选框的全选和反选

技术：vue项目，computed，every，forEach，v-model，v-on

样式：

需求：

1.勾选全选勾选框，小选全部选中， 取消勾选全选勾选框，小选选中全部取消，

2.当点击反选按钮时，小选反选；

<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 {
  name: 'home-container',
  data () {
    return {
    //定义内容
      arr: [
        {
          name: '张三',
          C: false
        },
        {
          name: '李四',
          C: false
        },
        {
          name: '王五',
          C: false
        },
        {
          name: '赵六',
          C: false
        }
      ]
    }
  },
  computed: {
    isAll: {
      set (val) {
        console.log(val)  // true 或 false   （全选勾选框的状态）
        this.arr.forEach((obj) => (obj.C = val))
      },
      get () {
        return this.arr.every((obj) => obj.C === true)
      }
    }
  },
  methods: {
    btn () {
      this.arr.forEach((obj) => (obj.C = !obj.C))
    }
  }
}
</script>
<style>
</style>