如何在 Vue 中格式化日期

如果你使用 Vue 一段时间，很快就会发现它缺乏其他一些框架似乎都自带的精美格式化选项。我感觉 Vue 非常注重极简主义，他们并不想添加非核心的功能。然而，其中一项功能就是日期格式化。

您是否曾经遇到过这样的情况：数据源中的日期格式很丑陋，"2019-07-16T20:32:21"并且您曾想过“有什么最直接的方法可以使它变得可读？”

我最初的想法是使用计算属性，但很快发现效果不太好。如果我把日期嵌套在一个对象数组中，我就没法用计算属性来格式化它。

我的下一个想法是在组件中使用一个方法。但是日期格式是一个非常常见的问题。我不想在一个组件中解决这个问题，我想在所有组件中都解决这个问题。

我可以循环遍历数据，并在对象上创建一个新属性来保存formattedCreateDate和formattedUpdateDate，但每次获取新数据时，我都得重新计算它们。这听起来简直是疯了。为什么我要保存新数据来改变数据的视图？不，这违背了我所学过的所有计算机科学知识。

精氨酸。

所以我四处寻找。什么是“正确”的答案？一个简单直接，更重要的是，可以在一个地方重复使用和维护的答案。

Vue 过滤器

这时我发现Vue 有过滤器。过滤器是一些 UI 辅助方法，允许你在视图中快速格式化数据。过滤器看起来像这样：

{{ name | capitalize }}

其中name是变量名，capitalize 是一个过滤器，它接受变量名中的值并对其进行格式化。然后，mustache 表达式将显示 capitalize 过滤器的结果。

我甚至不知道 Vue 竟然支持这些。我用过的其他所有视图框架都有这个功能，所以这其实并不让我感到惊讶，但 Vue 并没有特别推荐它们。它们隐藏在 Vue 文档的深处，但 Vue 确实支持它们。

这就是我想要的日期设置。我拥有数据，只是想在这个视图中设置不同的格式。

Vue 的简单日期过滤器

所以简单的答案是，使用一个可以处理日期的过滤器。这里有一个：https ://github.com/eduardnikolenko/vue-filter-date-format

此过滤器将获取您的日期并将其转换为指定的格式。首先，您需要一个 Date 对象。如果您没有将日期以 Date 对象的形式存储在数据属性中，则可以使用https://github.com/eduardnikolenko/vue-filter-date-parse将日期字符串转换为对象。

{{ '2019-07-16' | dateParse('YYYY-MM-DD') }}

然后使用dateFormat过滤器以更用户友好的方式显示日期：

{{ '2019-07-16' | dateParse('YYYY-MM-DD') | dateFormat('MMMM D, YYYY') }}

这些过滤器的优点在于它们不需要引入任何额外的库。它们非常轻量，只保留了使用标准 JavaScript Date 对象函数的过滤函数^。1

这满足了我大约 90% 的日期处理需求，而且代码也相当流畅。但如果你需要更强大的功能怎么办？

Vue 中更复杂的日期过滤器

JavaScript 中日期库中最令人惊艳的莫过于 Moment.js 了。Moment.js无所不能。如果您需要类似或 的日期格式，那么您需要 Moment.js 之类的工具。幸运的是，有一个便捷的过滤器也使用了 Moment.js，它能为您提供所有这些令人惊叹的功能：2 hours agoLast Saturday at 9:00 PM

{{ '2019-07-16' | moment('from', 'now') }}

除非你绝对需要这种高级功能，否则我不会使用这个过滤器。Moment.js 不是一个小型库，仅仅为了进行简单的日期操作而将其加载到你的网页中，实在不值得。

所有这些都可以从 NPM 安装并直接导入到你的main.js文件中。它们还提供了出色的文档，所以不妨看看它们，彻底解决你所有的 Vue 日期问题。

1. 您可以在这里查看过滤功能。↩