Vue简单实现全选全不选按钮

<template>
  <div id="app">
    <div>
      <input type="checkbox" @click="checkAll" v-model="checked" />
      <span>全选</span>
    </div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <input type="checkbox" v-model="checkModel" :value="item.id" />
        <div>名称:{{item.name}}</div>
        <div>价格:{{item.price}}</div>
        <div>产地:{{item.adress}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'About',
  data () {
    return {
      list: [
        { id: 1, name: "苹果", price: 23, adress:'北京' },
        { id: 2, name: "香蕉", price: 18, adress: '上海' },
        { id: 3, name: "鸭梨", price: 29, adress: '山东' }
      ],
      checked: false, //是否全选
      checkModel: [] //双向数据绑定的数组，用的id
    }
  },
  watch: { // 监视双向绑定的数据数组
    checkModel () {
      if (this.checkModel.length == this.list.length) {
        this.checked = true;
      } else {
        this.checked = false;
      }
    }
  },

  methods: {
    checkAll () {
      if (this.checked) {
        this.checkModel = [];
      } else {
        this.list.forEach((item) => {
          if (this.checkModel.indexOf(item.id) == -1) {
            this.checkModel.push(item.id)
          }
        })
      }
    }
  }
}
</script>

带label标签的

   <ul>
      <li v-for="(item,index) in list" :key="index">
        <label :for="item.id">{{item.name}}</label>
        <input type="checkbox" v-model="checkModel" :value="item.value" :id="item.id"/>
      </li>
    </ul>
    <button @click="test"> 提交</button>
  </div>
</template>
<script>

export default {
  data() {
    return {
      checkModel: [],
      list: [
        { value: '支付宝', name: '支付宝', id: 1 },
        { value: '微信', name: '微信', id: 2 },
        { value: '云闪付', name: '云闪付', id: 3 },
      ],
    };
  },
  methods: {
    test() {
      console.log(this.checkModel);
    },
  },