时间戳

首页 > 解决方案 > 如何在 Vue 和 Pug 中从字符串日期类型转换日期？

vue.js - 如何在 Vue 和 Pug 中从字符串日期类型转换日期？

问题描述

我有这个 pug 文件，我想将系统日期与使用 VueJs 的对象中的日期进行比较。

这就是我所拥有的。我已经使用div #{new Date()}输出的这条线打印了系统日期Mon Oct 18 2021 10:46:39 GMT+0800 (Malaysia Time)

我还使用这个div {{event.details.meta.date}}输出的 vue 语法打印了日期2021-10-17

问题是如何将此日期从字符串转换为数据类型，然后将其与系统日期进行比较？

我试过了，div #{new Date("event.details.meta.date")}但输出是Invalid date

我试过div(v-if="isEventActive(event.details.meta.date)")

和

computed: {
  isEventActive(_eventDate) {
    var eventDate = new Date(_eventDate);
    return new Date() < eventDate;
  }, 
}

但它说isEventActive is not a function

标签： vue.jspug

解决方案

div #{new Date("event.details.meta.date")}输出Invalid date，因为字符串不是构造函数"event.details.meta.date"的有效值。Date()

div #{new Date(event.details.meta.date)}另一方面，应该输出类似的内容，Mon Oct 17 2021 08:00:00 GMT+0800 (Malaysia Time)因为您正在将 的值（event.details.meta.date显然是'2021-10-17'）传递给Date()构造函数。

div(v-if="isEventActive(event.details.meta.date)")输出<div v-if="isEventActive(event.details.meta.date)"></div>。

你可能想要这个：<div v-if="isEventActive('2021-10-17')"></div>. 然后在您的isEventActive方法中，_eventDate参数的值将是'2021-10-17'. （可能；我不熟悉 Vue。）

所以你可以试试这个：

// Input (Vue):
div(v-if=`isEventActive('${event.details.meta.date}')`)

// Output (HTML):
<div v-if="isEventActive('2021-10-17')"></div>

相同但没有模板文字：

// Input (Vue):
div(v-if="isEventActive('" + event.details.meta.date + "')")

// Output (HTML):
<div v-if="isEventActive('2021-10-17')"></div>

推荐阅读