Vue实现选择器可选择24小时的时间格式1200-1300代码

<template>
  <div class="time-picker">
    <div class="time-selector">
      <div
        class="time-item"
        :class="{ active: selectedStartTime === time }"
        v-for="time in timeList"
        :key="time"
        @click="selectStartTime(time)"
      >
        {{ time }}
      </div>
    </div>
    <div class="time-selector">
      <div
        class="time-item"
        :class="{ active: selectedEndTime === time }"
        v-for="time in timeList"
        :key="time"
        @click="selectEndTime(time)"
      >
        {{ time }}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      timeList: [],
      selectedStartTime: "",
      selectedEndTime: "",
    };
  },
  mounted() {
    this.generateTimeList();
  },
  methods: {
    generateTimeList() {
      for (let i = 0; i < 24; i++) {
        for (let j = 0; j < 2; j++) {
          let time = "";
          if (i < 10) {
            time += "0";
          }
          time += i + ":";
          if (j === 0) {
            time += "00";
          } else {
            time += "30";
          }
          this.timeList.push(time);
        }
      }
    },
    selectStartTime(time) {
      this.selectedStartTime = time;
    },
    selectEndTime(time) {
      this.selectedEndTime = time;
    },
  },
};
</script>
<style>
.time-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time-selector {
  display: flex;
  flex-direction: column;
}

.time-item {
  cursor: pointer;
  padding: 5px;
}

.time-item.active {
  background-color: #eee;
}
</style