vue 2.6 实现全选与取消全选功能

核心：computed计算属性

get获取list列表中input的checkbox值来判断是否为true  使用了数组的every方法 ES6方法

set根据自身的checkbox去影响list列表中input的checkbox值  使用了数组的forEach方法  ES3方法

顺便写了数组的排序

html部分的代码

<template>
  <div class="arr">
    <label><input type="checkbox" v-model="checkedAll">全选</label>
    <ul class="boxUl">
      <li v-for="(item,index) in arr" :key="index">
        <label><input type="checkbox" v-model="item.checked">{{item.name}}</label>
      </li>
    </ul>
    <button class="btn" @click="btn">重新排序</button>
  </div>
</template>

script部分的代码

<script>
export default {
  name: 'Demo09App',

  data() {
    return {
      parend: false,
      arr:[{
        name: '打球',
        checked: true
      },{
        name: '跳舞',
        checked: false
      },{
        name: '踢足球',
        checked: false
      },{
        name: '唱歌',
        checked: true
      },{
        name: '象棋',
        checked: false
      }]
    };
  },

  mounted() {
    
  },

  methods: {
    btn(){
      // 重新排序的方法
      this.arr.push(this.arr.shift())
    }
  },
  computed: {
    // 利用计算属性对内存依赖，不用重新渲染来更新数据
    checkedAll: {
      // 通过get属性来获取依赖的属性值来判断是否为 全选 或 非全选
      get:function(){
        // 数组的every方法可以判断数组所有元素都为true才能为true   ES6方法
        return this.arr.every(item => item.checked === true)
      },
      // 通过自身来影响 其他的checkbox是否 全选 或 非全选
      set:function(newVal){
        // 数组的forEach方法循环遍历子项
        this.arr.forEach(item => item.checked = newVal)
      }
    }
  }
};
</script>

css部分的代码

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .boxUl li{
    // 修饰掉li前面的小圆点
    list-style: none;
  }
</style>