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

要在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>

在上述示例中，我们定义了两个计算属性 isBeforeCurrentTime 和 isAfterCurrentTime，分别用于判断接口返回的时间是早于当前时间还是晚于当前时间。在这里，我们使用了Date对象的比较操作符 < 和 > 进行时间的比较。

在mounted钩子函数中，我们模拟调用接口并获取到时间数据，并将其存储在this.apiResponseTime中。你可以根据实际情况，通过接口请求或其他方式获取接口返回的时间数据。

最后，在模板中使用v-if和v-else-if根据条件显示不同的内容。