vue实现全选反选案例

0. 基本布局和将初始数据渲染到页面

1. 小选影响全选

• 小选框 input 里面的 v-model ：对象.c关联 选中 状态

<li v-for="(obj, index) in arr" :key="index">
        <!-- 让对象的 c 属性，关联 选中 状态 -->
        <input type="checkbox" v-model="obj.c" />
        <span>{{obj.name}}</span>
      </li>

•  全选框 input 里的 v-model 关联全选按钮的 选中 状态--isAll

<span>全选:</span>
<input type="checkbox" v-model="isAll" />

• 定义isAll计算属性, 值通过小选框们统计c属性状态得来

  // 计算属性 isAll
  computed: {
    isAll(){
      // 3. 统计小选框状态 -> 全选状态
      // every() 查找数组里“不符合”条件的数据，直接原地返回 false
      return this.arr.every(obj => obj.c === true)
    },

2. 全选影响小选

•  isAll改成完整写法, set里获取到全选框, 勾选的状态值 
• 遍历数据数组, 赋给所有小选框v-model关联的属性
• 小选框v-model, 关联数组里对象的c属性，isAll计算属性的set方法, 拿到全选框状态，状态值赋给, 数组里每个对象的c属性

computed: {
    // isAll(){
    // // 3. 统计小选框状态 -> 全选状态
    // // every() 查找数组里“不符合”条件的数据，直接原地返回 false
    // return this.arr.every(obj => obj.c === true)
    // },
    // isAll改成完整写法, set里获取到全选框, 勾选的状态值
    isAll: {
      set (val) {
        // 4.拿到全选框的选中状态(true/false)，从而影响小选框的选中状态
        this.arr.forEach(obj => obj.c = val)
      },
      get () {
        // 3. 统计小选框状态 -> 全选状态
        // every() 查找数组里“不符合”条件的数据，直接原地返回 false
        return this.arr.every(obj => obj.c === true)
      }
    },
  },

3.反选

• 小选框的勾选状态, 在对象的c属性
• 遍历所有对象, 把对象的c属性取相反值赋予回去即可

  methods: {
    reBtn(){
      // 6.点击的时候让对象里的 c 属性取反再赋予回去
      this.arr.forEach(obj => obj.c = !obj.c)
    }
  },

完整代码：

<template>
  <div>
    <span>全选:</span>
    <!-- 2.v-model 关联全选按钮的 选中 状态 -->
    <input type="checkbox" v-model="isAll" />
    <!-- 5.给 反选 按钮绑定点击事件 -->
    <button @click="reBtn">反选</button>
    <ul>
      <li v-for="(obj, index) in arr"
          :key="index">
        <!-- 1.让对象的 c 属性，关联 选中 状态 -->
        <input type="checkbox"
               v-model="obj.c" />
        <span>{{obj.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "白龙马",
          c: false,
        },
      ],
    };
  },
  // 计算属性 isAll
  computed: {
    // isAll(){
    // // 3. 统计小选框状态 -> 全选状态
    // // every() 查找数组里“不符合”条件的数据，直接原地返回 false
    // return this.arr.every(obj => obj.c === true)
    // },
    // isAll改成完整写法, set里获取到全选框, 勾选的状态值
    isAll: {
      set (val) {
        // 4.拿到全选框的选中状态(true/false)，从而影响小选框的选中状态
        this.arr.forEach(obj => obj.c = val)
      },
      get () {
        // 3. 统计小选框状态 -> 全选状态
        // every() 查找数组里“不符合”条件的数据，直接原地返回 false
        return this.arr.every(obj => obj.c === true)
      }
    },
  },
  methods: {
    reBtn(){
      // 6.点击的时候让对象里的 c 属性取反再赋予回去
      this.arr.forEach(obj => obj.c = !obj.c)
    }
  },
};
</script>