【小demo 】复选框的全选功能

复选框的全选功能，用computed解决
总：

<template>
  <div>
    全选
    <input type="checkbox" v-model="allCheck" />
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox" v-model="item.select" />{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "myCheck",

  data() {
    return {
      list: [
        { name: "1", select: false },
        { name: "2", select: false },
        { name: "3", select: false },
        { name: "4", select: false },
        { name: "5", select: false },
      ],
    };
  },
  computed: {
    allCheck: {
      get() {
        // every返回是布尔值，一假则假，全真为真
        //some 返回的也是布尔值，当有一个元素符合条件的时候返回true
        return this.list.every((item) => item.select);
      },
      set(val) {
        this.list.forEach((item) => (item.select = val));
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 200px;
  height: 300px;
  border: 1px sandybrown solid;
}
</style>

---

思路：1.给全选框添加v-model控制框框的选中状态
2.通过计算属性来解决需要计算的问题，解决模板冗余
3.要实现
- 所有的选项选中时全选框自动选中
- 点击全选所有的选项都被选中

计算属性有get 和set ，get需要return一个结果出去
set是获取当前的值，来通过获取到的状态来设置其他状态