Vue当前时间与接口返回时间的判断

<template>
  <div>
    <p v-if="isBeforeCurrentTime">接口返回时间早于当前时间</p>
    <p v-else-if="isAfterCurrentTime">接口返回时间晚于当前时间</p>
    <p v-else>接口返回时间与当前时间相同</p>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentTime: new Date(),
      apiResponseTime: null // 假设接口返回的时间存储在该变量中
    }
  },
  computed: {
    isBeforeCurrentTime() {
      if (!this.apiResponseTime) {
        return false; // 如果没有接口返回时间，则不满足判断条件
      }
      
      const apiTime = new Date(this.apiResponseTime);
      return apiTime < this.currentTime;
    },
    isAfterCurrentTime() {
      if (!this.apiResponseTime) {
        return false; // 如果没有接口返回时间，则不满足判断条件
      }
      
      const apiTime = new Date(this.apiResponseTime);
      return apiTime > this.currentTime;
    }
  },
  mounted() {
    // 在实际应用中，这里可以调用接口获取时间数据
    // 假设接口返回的时间存储在this.apiResponseTime中
    // 在这里进行赋值操作
      
    // 示例：模拟接口返回时间
    setTimeout(() => {
      this.apiResponseTime = new Date().toISOString();
      console.log(this.apiResponseTime);
    }, 2000);
  }
}
</script>