<section class="box">

     <label  :for="item3" @click="chooseType($event,index3)"  v-for="(item3,index3) in type"  class="labelName">

        <input type="checkbox" :value="item3" :id="item3" v-model="checkedValue" class="checkboxList">            

        <div class="name">{{item3}}</div>         

         // checkbox的v-model绑定值一定要是数组 

        {{checkedValue}} 

     </label>

     <button @click="chooseQu">全选</button>

     <button @click="chooseNo">全不选</button>

  </section>

data(){

        return{

          checkedValue: [],

          type:['a','b','c','d']   // 测试数据，可在mounted钩子函数中将后台数据赋值

        }

},

methods:{

        chooseType(e,val){

          console.log(e.target.checked)   // 可获取当前的checked 状态

          console.log(val)                // 可获取到当前的下标。

        },

        chooseQu(){

          // document.querySelectorAll('.checkboxList').setAttribute("checked","true");

          this.checkedValue = this.type ;  //将原数据全部赋值给checkedValue,全部置为true.  

        },

        chooseNo(){

          this.checkedValue = [] ;    // checkedValue 为空即将checkedValue全部置为false,

        }

  }