vue实现多选、全选功能

<!-- template -->
<span class="title" v-if="clickAll" @click="clearCheck">取消</span>
<span class="title" v-else @click="checkAll">全选</span>
<div class="one-item" v-for="(item, index) in List" :key="index" >
     <div class="item-r" ref="liId">
          <span class="date">{{item.time}}</span>    <!-- 时间 -->
          <span class="image-item">{{item.name}}</span>    <!-- 项目名字 -->
     </div>
     <button @click="choosed(index)">
           <img v-if="checkBox.includes(index)" class="select" src="###" alt="已选择图标">
           <div v-else class="no-select" src="" alt="待选择图标"></div>
      </button>
</div>

<!-- 样式忽略 -->

<script>
export default {
    name: '',
    data() {
        return {
            List: [
                {time: '', name: '',}
            ],    // 选项集合
            checkBox: [],    // 选中的内容
            clickAll: false,    // 是否全选
        }
    },
    methods: {
        // 多选
        async choosed(index) {
            var idx = this.checkBox.indexOf(index);
            if(this.$refs.liId[index].className == 'item-r') {
                // 添加类--选中状态
                this.$refs.liId[index].className = 'item-r choose';
                this.checkBox.push(index);
            } else {
                // 选中再取消
                this.$refs.liId[index].className = 'item-r';
                this.checkBox.splice(idx, 1);
            }
      
            
        },
        //全选       
        async checkAll() {
            var len = this.imageList.length;
            this.checkBox = [];
            for (var i = 0; i < len; i++) {
                this.checkBox.push(i);
            }
            this.clickAll=true;
        },
        // 取消全选       
        async clearCheck() {
            this.checkBox = [];
            this.clickAll = false;
        },   
    
    }
}
</script>