VUE的踩坑日记（1）

<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">            // for属性一定要与id一致，原因请看上图
        <div class="name">{{item3}}</div>  // label的值            // checkbox的v-model绑定值一定要是数组
        &nbsp;&nbsp;
        {{checkedValue}}   // 查看值
     </label>
     <button @click="chooseQu">全选</button>
     <button @click="chooseNo">全不选</button>

  </section>

 data: 

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

methods:

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,
        }

  }