vue遍历数组times2: [ { time: '8:00',click: false }, { time: '9:00',click: true }, {time: '10:00', click: false }, { time: '11:00',click: false }, { time: '12:00', click: true }, { time: '13:00', click: true }, { time: '14:00', click: true }, { time: '15:00', click: true }, { time: '16:00', click: false }, { time: '8:00',click: false }, { time: '9:00',click: true }, { time: '10:00', click: false }, { time: '11:00', click: false }, { time: '12:00', click: true }, { time: '13:00', click: true }, { time: '14:00', click: true }, { time: '15:00', click: true }, { time: '16:00', click: false }, ]实现生成多个方格，click的值表示该方格是否可以选中，可选为蓝色，不可选为灰色，从鼠标按下触发的方格开始，拖动选中多个方格，到鼠标弹起触发的方格结束，只可选择一段且连续的方格。选中的方格颜色为红色，

可以使用 v-for 指令遍历数组，根据 click 的值来设置方格的颜色。在鼠标按下事件中记录当前选中的方格，鼠标移动时根据当前鼠标所在的方格和按下时记录的方格来确定选中的方格范围，再根据范围设置选中方格的颜色为红色。在鼠标弹起事件中取消选中状态。具体实现可以参考以下代码：

<template>
  <div>
    <div v-for="(item, index) in times2" :key="index"
         :class="['time-cell', item.click ? 'clickable' : '']"
         :style="{ backgroundColor: item.color }"
         @mousedown="startSelect(index)"
         @mousemove="select(index)"
         @mouseup="endSelect">
      {{ item.time }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      times2: [
        { time: '8:00', click: false, color: '' },
        { time: '9:00', click: true, color: '' },
        { time: '10:00', click: false, color: '' },
        { time: '11:00', click: false, color: '' },
        { time: '12:00', click: true, color: '' },
        { time: '13:00', click: true, color: '' },
        { time: '14:00', click: true, color: '' },
        { time: '15:00', click: true, color: '' },
        { time: '16:00', click: false, color: '' },
        { time: '8:00', click: false, color: '' },
        { time: '9:00', click: true, color: '' },
        { time: '10:00', click: false, color: '' },
        { time: '11:00', click: false, color: '' },
        { time: '12:00', click: true, color: '' },
        { time: '13:00', click: true, color: '' },
        { time: '14:00', click: true, color: '' },
        { time: '15:00', click: true, color: '' },
        { time: '16:00', click: false, color: '' },
      ],
      selecting: false,
      start: -1,
      end: -1,
    };
  },
  methods: {
    startSelect(index) {
      if (this.times2[index].click) {
        this.selecting = true;
        this.start = index;
        this.end = index;
        this.setColor(index, 'red');
      }
    },
    select(index) {
      if (this.selecting) {
        if (this.times2[index].click) {
          if (index < this.start) {
            this.setColor(this.end, '');
            this.setColor(index, 'red');
            this.end = this.start;
            this.start = index;
          } else if (index > this.end) {
            this.setColor(this.start, '');
            this.setColor(index, 'red');
            this.start = this.end;
            this.end = index;
          } else {
            this.setColor(this.start, '');
            this.setColor(index, 'red');
            this.start = index;
          }
        } else {
          this.endSelect();
        }
      }
    },
    endSelect() {
      if (this.selecting) {
        this.selecting = false;
        for (let i = this.start; i <= this.end; i++) {
          this.setColor(i, this.times2[i].click ? 'blue' : '');
        }
        this.start = -1;
        this.end = -1;
      }
    },
    setColor(index, color) {
      this.$set(this.times2[index], 'color', color);
    },
  },
};
</script>

<style scoped>
.time-cell {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  display: inline-block;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
}

.clickable {
  background-color: blue;
}

.red {
  background-color: red !important;
}

.gray {
  background-color: gray !important;
}
</style>