两个日期之间的vuejs样式绑定

<template>
  <div>
    <div v-for="date in dates" :key="date" :class="getClass(date)">
      {{ date }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      startDate: '2022-01-01',
      endDate: '2022-01-10',
      dates: [] // 存储日期的数组
    };
  },
  mounted() {
    this.generateDates();
  },
  methods: {
    generateDates() {
      // 生成日期数组
      const start = new Date(this.startDate);
      const end = new Date(this.endDate);
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数

      for (let date = start; date <= end; date.setDate(date.getDate() + 1)) {
        this.dates.push(date.toISOString().split('T')[0]);
      }
    },
    getClass(date) {
      // 根据日期判断应用的样式
      const currentDate = new Date(date);
      const today = new Date();

      if (currentDate < today) {
        return 'past-date';
      } else if (currentDate > today) {
        return 'future-date';
      } else {
        return 'current-date';
      }
    }
  }
};
</script>

<style>
.past-date {
  color: gray;
}

.future-date {
  color: blue;
}

.current-date {
  color: red;
}
</style>