如何在JS/Vue.js中检查时间戳是否大于当前时间(没有重新加载页面)

Question

我正在使用Vue.js创建一个网站，并试图在item.queue_entry_time > (NOW - 1 hour)中突出显示一行

queue是一个具有以下属性的对象数组

queue_entry_time
queue_call_time
queue_entrant_name

标记

<template v-for="(item, index) in queue">
  <div class="">
  </div>
</template>

当满足上述条件时，我要做的是在div中显示class1。我不知道如何做到这一点，因为创建一个函数来返回当前的时间戳是固定的，并且不会随着时间的推移而改变。

Answer 1

您可以向对象(例如，名为recent)添加一个布尔属性，该属性是基于周期性地的queue_entry_time设置的。

export default {
  //...
  mounted() {
    this._timer = setInterval(() => {
      const anHourAgo = Date.now() - (60 * 60 * 1000)
      for (const q of this.queue) {
        q.recent = q.queue_entry_time > anHourAgo
      }
    }, 5000)
  },
  beforeDestroy() {
    clearInterval(this._timer)
  },
}

然后，使用基于每个对象的条件渲染 recent来显示class1

<template v-for="(item, index) in queue">
  <div v-if="item.recent">class1</div>
</template>

如果您的实际意思是要基于此条件应用类，则可以使用类绑定

<template v-for="(item, index) in queue">
  <div :class="{ class1: item.recent }">...</div>
</template>

演示

Answer 2

按以下方式设置标记

<template v-for="(item, index) in queue">
    <div :class="{class1: checkCutoff(item)}">
    
    </div>
</template>

那你就得

• 向data中添加一个属性以保存截止值
• 添加由method调用的:class
• 向mounted添加代码以启动间隔
• 向beforeDestroy添加代码以停止间隔

所以，像这样：

data: () => ({
    cutoff: 0
}),
methods: {
    checkCutoff(item) {
        return item.queue_entry_time > cutoff;
    }
},
mounted() {
    this.interval = setInterval(() => this.cutoff = new Date - 60 * 60 * 1000, 1000);
},
beforeDestroy() {
    clearInterval(this.interval);
}