如何从 Vue 和 Pug 中的字符串日期类型转换日期？

Question

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

这就是我的。我使用此行 div #{new Date()} 打印系统日期，输出 Mon Oct 18 2021 10:46:39 GMT+0800 (Malaysia Time)

我还使用此 vue 语法打印日期 div {{event.details.meta.date}} 输出 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

Answer 1

div #{new Date("event.details.meta.date")} 输出 Invalid date 因为字符串 "event.details.meta.date" 不是 Date() constructor.

的有效值另一方面，

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'，这显然是 [=15] =]构造函数。

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>

相同但没有 template literal:

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

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

Answer 2

Vue 计算属性不接受参数。它是模板中可见的函数的 return 值。

要解决您的问题，您可以：

将您的 isEventActive 函数移动到 methods 部分，或者
使用计算属性和 return 函数。

第一种方法如下所示：

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

如果这不起作用（即页面没有正确更新 eventDate），那么试试这个：

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

如何从 Vue 和 Pug 中的字符串日期类型转换日期？

How to convert date from string datetype in Vue and Pug?

vue.js

pug