带快捷键的批量操作（按下shift键批量改变复选框的值）

<template>
  <ul class="checkbox-wrapper">
    <li :class="{'false-msg': !item}" v-for="(item, i) in data" :key="i">
      <input v-model="data[i]" type="checkbox" @click="sectionCompute($event,i)">
      {{item}}
    </li>
  </ul>
</template>

<script>
  export default {
    name: "text",
    data () {
      return {
        data: [true, true, true, true, true, true, true, true, true, true, true, true, true, true],
        isLastChecked: false,
        preI: -1,
      }
    },
    methods: {
      sectionCompute (e, i) {
        let vm = this;
        if(e.shiftKey && vm.isLastChecked) { //第二次摁下shift键
          vm.isLastChecked = false;     //将前一次摁下记录清空
          let k = 0;
          let firStatus = true;
          // if(vm.data[vm.preI] == vm.data[i]) {  //两次选中值不一样则不做批量处理
          //   return;
          // }
          if (i > vm.preI) {
            firStatus = vm.data[vm.preI];
            for (k = vm.preI; k < i + 1; k++) {
              vm.data[k] = firStatus;
            }
          } else if (i < vm.preI) {
            firStatus = vm.data[vm.preI];
            for (k = i; k < vm.preI + 1; k++) {
              vm.data[k] = firStatus;
            }
          }
        } else if (e.shiftKey && !vm.isLastChecked) { //第一次摁下shift键
          vm.isLastChecked = true;  //第一次摁下shift
          vm.preI = i;
        } else {
          vm.isLastChecked = false;  //将前一次摁下记录清空
          vm.data[i] = !vm.data[i];
        }
      },
    }
  }
</script>

<style scoped>
  .checkbox-wrapper {
    width: 256px;
    margin: 20px auto;
  }
  .false-msg {
    text-decoration:line-through
  }
</style>

效果：