[vue] vue实现全选(v-bind && v-model妙用)

v-bind  和  v-model 连用的妙用  实现checkbox全选，取消全选

<template>
  <div>
    全选<input type="checkbox" v-model="all" />
    <br />
    <ul>
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
　　　　　//:value 和 v-model 一起使用会自动将选中的值放入数组，vue底层早已实现好，直接调用就可以
        <input type="checkbox" :value="item.id" v-model="arr" />
      </li>
    </ul>
    {{ arr }}
  </div>
</template>
<script>
export default {
  methods: {},
  computed: {
    all: {
      set(e){
        if(e) this.arr=this.list.map(item=>item.id)
        else this.arr=[]
      },
      get() {
        return this.list.length === this.arr.length;
      },
    },
  },
  data() {
    return {
      arr: [],
      list: [
        {
          id: 1,
          name: "张三",
          age: 18,
        },
        {
          id: 2,
          name: "李四",
          age: 20,
        },
        {
          id: 3,
          name: "李五",
          age: 20,
        },
      ],
    };
  },
};
</script>
<style lang="">
</style>