Vue中v-model指令配合computed计算属性完成全选/不全选和反选的案例

1、v-model 双向绑定复选框的两种情况：

情况一：当**v-model绑定**的变量为 数组 的时候，这个变量和复选框的value属性双向绑定

情况二：当**v-model绑定**的变量为 非数组 的时候，这个变量和复选框的checked状态值属性双向绑定

2、computed有两种写法：

第一种写法：直接使用函数方法

语法:
computed: {
    "计算属性名"() {
        return 值
    },
}
注意：计算属性也是vue数据变量，所以不要和data里重名，用法和data相同

第二种写法：使用对象（computed计算属性完整写法）

语法:
computed:{
    属性名: { 
        set(val){
            val就是用户修改后的值，
            用户修改计算属性的值的时候触发
        },
        get(){
            就是计算属性函数写法的那个函数
            获取或者依赖项发生改变的时候触发
        }
    }
}

3、全选/不全选和反选的案例

<template>
  <div>
    <div>
      全选
      <input type="checkbox" v-model="isAll" />
      <button>反选</button>
    </div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">
        <label>
          <input v-model="item.c" type="checkbox" />
          <span>{{ item.name }}</span>
        </label>
      </li>
    </ul>
  </div>
</template>
​
<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '猪八戒',
          c: false,
        },
        {
          name: '孙悟空',
          c: true,
        },
        {
          name: '唐僧',
          c: false,
        },
        {
          name: '白龙马',
          c: false,
        },
      ],
    }
  },
  computed: {
    // 计算属性完整写法：
    isAll: {
      // 给计算属性赋值的时候触发set函数
      set(bool) {
        // bool 是全选的cheked 状态值
        // 把bool赋值给下面的复选框，实现全选和不全选
        this.arr.forEach((item) => {
          item.c = bool
        })
      },
      // 获取计算属性的时候触发get函数
      get() {
        // every：同样能够遍历数据，这个函数会返回一个布尔值，这个函数中
        // 可以写条件判断，当数组中的所有元素都符合你写的条件判断的时候，
        // 这个every方法会返回true，否则false(也就是说当有一个元素不符合条件的时候立刻返回false)
        let bool = this.arr.every((item) => {
          return item.c === true
        })
        return bool
      },
    },
  },
}
</script>
​
<style scoped></style>
​