Vue【一】全选与反选的实现，computed计算属性的应用，以及computed计算属性对象写法内置的set和get的使用

Vue【一】全选与反选的实现

---

---

前言

初学者在学完计算属性的时候，可以拿这个小项目来练手，如果忘了计算属性的应用，也可以用这个小项目回忆一波。
动态展示

注：文章末尾有初始化的结构，拿来用即可。

---

一、操作步骤

1、渲染数据

使用v-if把数组arr里面的数组渲进页面

	<ul>
+      <li v-for="(item,i) in arr" :key="i">
+        <input type="checkbox"  v-model="item.c"/>
+        <span>{{item.name}}</span>
      </li>
    </ul>

2、小选影响大选

我们点击单个选项来影响全选是否被选中的状态，为了接下来方便，在这里checkAll计算属性我们采用对象写法。

 +    <input type="checkbox" v-model="checkAll"/>

computed:{
    checkAll:{
      get(){
        return this.arr.every(item=>item.c==true)
      },
    }
   
  }

效果：

3、大选影响小选

我们再点击全选的时候下面的小选也要跟着变化------即大选影响小选。

computed:{
    checkAll:{
      get(){
        return this.arr.every(item=>item.c==true)
      },
+     set(val){
+       return this.arr.forEach(item=>item.c=val)
+    }
    }
   
  }

效果：

4、拓展：反选

我们在此基础上添加一个反选按钮，即点击反选的时候，被选中的取消选中，没被选中的被选中。

<span>全选:</span>
    <input type="checkbox" v-model="checkAll"/>
+   <br>
+   <button @click="uncheck">反选</button>
    <!-- <button >反选</button> -->
    <ul>

methods:{
    uncheck(){
      this.arr.forEach(item=>item.c=!item.c)
    }
  },

二、代码

1、源码（未写之前）

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" />
    <!-- <button >反选</button> -->
    <ul>
      <li >
        <input type="checkbox" />
        <span>名字</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "沙和尚",
          c: false,
        },
      ],
    };
  }
};
</script>

<style>
</style>

2.源码（已经完成）

<template>
  <div>
    <span>全选:</span>
    <input type="checkbox" v-model="checkAll"/>
    <br>
    <button @click="uncheck">反选</button>
    <!-- <button >反选</button> -->
    <ul>
      <li v-for="(item,i) in arr" :key="i">
        <input type="checkbox"  v-model="item.c"/>
        <span>{{item.name}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: "猪八戒",
          c: false,
        },
        {
          name: "孙悟空",
          c: false,
        },
        {
          name: "唐僧",
          c: false,
        },
        {
          name: "沙和尚",
          c: false,
        },
      ],
    };
  },
  methods:{
    uncheck(){
      this.arr.forEach(item=>item.c=!item.c)
    }
  },
  computed:{
    checkAll:{
      get(){
        return this.arr.every(item=>item.c==true)
      },
      set(val){
        return this.arr.forEach(item=>item.c=val)
      }
    }
   
  }
};
</script>

<style>
</style>

---

总结

本案例主要用了计算属性对象写法中的get和set，get方法是通过其他属性来算计自己，set是通过自己来算计其他属性。