vuejs中日期和着色文本的比较

<template>
  <div>
    <p :style="dateComparison ? 'color: green' : 'color: red'">{{ dateComparison ? '日期一在日期二之前' : '日期一在日期二之后' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date1: new Date(2022, 0, 1), // 假设为2022年1月1日
      date2: new Date(2022, 0, 2), // 假设为2022年1月2日
    };
  },
  computed: {
    dateComparison() {
      const year1 = this.date1.getFullYear();
      const month1 = this.date1.getMonth();
      const day1 = this.date1.getDate();
      const year2 = this.date2.getFullYear();
      const month2 = this.date2.getMonth();
      const day2 = this.date2.getDate();

      if (year1 < year2) {
        return true;
      } else if (year1 === year2 && month1 < month2) {
        return true;
      } else if (year1 === year2 && month1 === month2 && day1 < day2) {
        return true;
      } else {
        return false;
      }
    },
  },
};
</script>