在前端开发中，处理日期和时间是一个常见的任务。Vue.js 提供了丰富的功能和组件，使得处理日期和时间变得更加容易和优雅。本文将介绍 Vue.js 中如何处理日期和时间，包括日期和时间格式化、日期和时间选择器以及用户友好的时间显示。
日期和时间格式化
在 Vue.js 中处理日期和时间的第一步就是格式化它们。Vue.js 提供了内置的过滤器和方法来格式化日期和时间。以下是一些通用的日期和时间格式：
YYYY-MM-DD：年-月-日YYYY/MM/DD：年/月/日MM-DD-YYYY：月-日-年MM/DD/YYYY：月/日/年dddd, MMMM Do YYYY, h:mm:ss a：星期几，月份，日期，小时:分钟:秒 AM/PM
使用 moment.js 库也是一种流行的处理日期和时间的方式。通过在 Vue.js 中引入该库，您可以轻松地格式化、比较、解析和表示日期和时间。下面展示了如何使用 moment.js 来格式化日期和时间：
------ ------ ---- --------
------ ------- -
------ -
------ -
----- --- -------
-------- -------------
-------- ----- -- ----- ------- --
-
--
--------- -
---------------- -
------ --------------------------------------
--
---------------- -
------ --------------------------------------
-
-
-日期和时间选择器
除了格式化日期和时间外，Vue.js 还提供了几个日期和时间选择器组件。这些组件包括：
v-date-picker：日期选择器v-time-picker：时间选择器v-datetime-picker：日期和时间选择器
这些组件使用户能够轻松选择日期和时间，并根据自己的需求进行定制。下面是一个使用 v-date-picker 的示例：
----------
-------------- -------------- ---------------------
-----------
--------
------ ------- -
------ -
------ -
----- --- -------
-------- --- ------------------
-
-
-
---------在以上示例中，通过设置 v-model 来存储用户给出的日期。还通过 min-date 属性来限制最小日期。v-date-picker 还提供了其他许多属性和事件，以满足不同的需求。
用户友好的时间显示
最后，Vue.js 还允许您创建用户友好的时间显示。用户友好的时间显示可以将时间表达为相对于当前时刻的时间。例如，如果一个事件发生在两天前，那么用户友好的时间显示可能会显示“2 天前”。
以下示例使用 moment.js 和 vue-moment 库演示如何在 Vue.js 中实现用户友好的时间显示：
----------
-----
-- -------------------- --
------
-----------
--------
------ ------ ---- --------
------ - --------------- - ---- ------------
------ ------- -
------ -
------ -
----- --- ------
-
--
-------- ------------------
-------- -
-------------------- -
------ ----------------------
-
-
-
---------在以上示例中，我们通过使用 moment.fromNow() 来创建相对于当前时刻的时间，然后将其呈现出来。
结论
Vue.js 提供了许多方法来处理日期和时间。使用内置的过滤器、组件和第三方库，您可以轻松地格式化、选择和表示日期和时间。此外，用户友好的时间显示也可以
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672863e02e7021665e2009b7