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

  }