Vue JS - 仅检索日期

Question

我正在调用 api 来检索一组对象。 其中一个对象返回日期和时间，如下所示：

createdAt: "2020-11-04 09:48:32"

这是我显示日期和时间的地方：

<template v-for="item in collectedTrash">
        <BeforeAndAfter v-if="item.isPresented === 1"                            
                        :key="item.username"
                        :avatarUrl="require('@/assets/img/images/img_stats_km@2x.png')"
                        :imageBefore="getImageUrl(item.imageUrlBefore)"
                        :imageAfter="getImageUrl(item.imageUrlBefore)"
                        :username="item.username"
                        :date="item.createdAt"/> This is where I get the date
</template>

无论如何我只能检索日期，而不是日期和时间？

Answer 1

我假设您无权访问 api，因此必须在您的 vue 应用程序中处理日期。

您需要将日期作为日期 Object 还是字符串？ 如果字符串表示足够，您可以使用诸如Date fns 之类的库并使用格式 function：

...
:date="format(new Date(item.createdAt), 'yyyy-MM-dd')"

另一种选择可能是仅使用您收到的字符串的前 10 个字符作为日期： date="item.createdAt.substring(0,9)"

Answer 2

您是否尝试过类似的方法： :date="item.createdAt.substr(0, 10)"

Answer 3

根据我的经验，在 JS 中格式化日期时间的最简单方法是使用 Moment.js 库（ https://momentjs.com/ ）。 您可以在将日期时间字符串传递给您的子组件之前重新格式化它。

或者，如果您不想依赖第三方库并且您知道日期时间字符串将始终以该格式传递，我想您可以执行item.createdAt.slice(0, 10) 。

Answer 4

Moment.js 对日期和时间非常有帮助

时刻文档

moment("String").format('L'); // 2020 年 4 月 11 日