带有日期比较的 Vue V-IF答案

【问题标题】：Vue V-IF with a date comparison带有日期比较的 Vue V-IF
【发布时间】：2019-09-15 22:42:27
【问题描述】：

在我的网站中，我得到一个对象，其中包含一个名为 available_at 的字段，它是这种格式的日期 2019-08-08

我有一个使用 vue 绑定的正常 html 表，但我不知道如何使用 Date.now() 对上面的时间戳进行 vue 比较

<tr :class="[dateEvent.priority + '-priority', 'status-' + dateEvent.status]">
  <td v-if="dateEvent.task_typet_id === '2' && dateEvent.name === 'Task Title' && dateEvent.available_at === Date.now()">{{ dateEvent.task_identifier }}</td>
</tr>

我怎样才能让它根据当前日期成功检查该字段？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

几点：

JavaScript Date 对象包含一个时间值，因此使用相等比较 === 将要求它们匹配到毫秒。你可能不希望这样。
您可以使用构造函数将字符串转换为Date 对象，例如：

     new Date("2019-08-08")

将创建一个对应于 8 月 8 日午夜的日期。

小心处理时区。提供的日期是当地时区还是 UTC？

我建议使用计算属性来简化模板，然后查看可用于 Date 对象的各种方法，以了解如何构建符合应用程序要求的比较。

【讨论】：

都是本地时区驱动的，但这会每天加载，所以我只想显示当天可用的记录。所以你是说我会把available_at放在像``` new Date(dateEvent.available_at)``这样的日期？
是的，这将创建一个可用于比较的Date 对象。

【解决方案2】：

如果您想检查两个日期是否在同一天，您可以尝试：

function isSameDay(date1, date2){
  return date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDay() === date2.getDay()
}

console.log(isSameDay(new Date(), new Date(dateEvent.available_at))

您还可以尝试像 moment 这样的库来处理不同的日期区域设置。

【讨论】：

【解决方案3】：

您可以为此使用moment：

moment().isSame(dateEvent.available_at, 'day');

这会将当前日期与dateEvent.available_at 中的日期进行比较，仅'day'。

【讨论】：