使用vue.js實現checkbox的全選，和部分刪除，部分提交

直接上代碼：

<template>
  <div class="select">
    <ul>
      <li v-for="(item,index) in lesson" style="margin-top: 15px;">
        <label class="checkbox-label">
          <input v-model="selectArr" :value="index"  :checked="index == 0" type="checkbox" class="checkbox-input event-allChooseHouse" />
          <span class="checkbox-core"></span>
          <span class="text">{{item.name}}</span>
        </label>
      </li>
    </ul>
    <button @click="deleteData">刪除</button>
    <input type="checkbox" @click="submitData">提交的

    <div class="selectAll" style="margin-top: 15px;">
      <label class="checkbox-label">
        <input type="checkbox" class="checkbox-input event-allChooseHouse" @click="selectAll" value="" >
        <span class="checkbox-core"></span>
        <span class="text">全選</span>
      </label>
    </div>
  </div>
</template>

<script>
  var lesson = [
    {id:'1001',name:'vue'},
    {id:'1002',name:'angurlar'},
    {id:'1003',name:'react'},
    {id:'1004',name:'javascript'},
    {id:'1005',name:'jquery'}
  ];
export default {
  name: '',
  data () {
    return {
      msg: '選擇',
      lesson:lesson,
      selectArr: []
    }
  },
  methods: {
    selectAll(event) { //全選
      var _this = this;
      console.log(event.currentTarget.checked);
      if (!event.currentTarget.checked) {
        this.selectArr = [];
      } else {         //實現全選
        _this.selectArr = [];
        _this.lesson.forEach(function(item, i) {
          _this.selectArr.push(i);
        });
        console.log(_this.selectArr);
      }
    },
    deleteData(){ //刪除
        var arr = [];
        var len = this.lesson.length;
        for(var i=0;i<len;i++){
            if(this.selectArr.indexOf(i)>=0){
                console.log(this.selectArr.indexOf(i));
            }else {
                console.log('lesson[i]');
                console.log(lesson[i]);
                arr.push(lesson[i]);
            }
        }
        this.lesson = arr;
        this.selectArr = [];
    },
    submitData(){ //提交
        var subArr = [];
        var len = this.lesson.length;
        for(var i= 0;i<len;i++){
            if(this.selectArr.indexOf(i)>=0){
                subArr.push(lesson[i]);
            }
        }
        if(subArr.length==0){
            alert('請勾選後再提交');
        }else {
          console.log('提交的');
          console.log(subArr);
        }

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /*組件 start*/
  .checkbox-label{padding: 0 0.1rem;display: flex;align-items: center;}
  .checkbox-label .checkbox-input{display: none;opacity: 0;}
  .checkbox-label .checkbox-core{
    display: inline-block;
    border-radius: 100%;
    /*background: #e6e7e9;*/
    border:1px solid #c2c2c2;
    position: relative;
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
  .checkbox-core:after {
    border: 2px solid transparent;
    border-left: 0;
    border-top: 0;
    content: " ";
    top: 2px;
    left: 8px;
    position: absolute;
    width: 6px;
    height: 12px;
    -webkit-transform: rotate(45deg) scale(0);
    transform: rotate(45deg) scale(0);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s;
  }
  .checkbox-input:checked+.checkbox-core {background-color: #26a2ff;border-color: #26a2ff;}
  .checkbox-input:checked+.checkbox-core:after {border-color: #fff;-webkit-transform: rotate(45deg) scale(1);transform: rotate(45deg) scale(1);}
  /*組件 end*/
</style>