在前端开发过程中，我们经常需要处理日期和时间的显示和计算，而 @bordman1/vue-moment 便是一个方便我们处理日期和时间的库。本文将介绍 @bordman1/vue-moment 的安装及基本使用方法。
安装
使用 npm 进行安装：
npm install --save @bordman1/vue-moment moment
同时，我们还需要在 main.js 文件中引入该库，并且将其加入到 Vue 实例中：
import Vue from 'vue'
import VueMoment from '@bordman1/vue-moment'
import moment from 'moment'
Vue.use(VueMoment, { moment })基本使用
1. 在组件中使用
我们在组件中引用如下：
<template>
<div>
<p>当前时间：{{ $moment().format('YYYY-MM-DD HH:mm:ss') }}</p>
<p>
昨天是：{{ $moment().subtract(1, 'days').format('YYYY-MM-DD') }}
</p>
</div>
</template>在上面的代码中，我们使用了 $moment，而没有使用正常的 moment 或 this.$moment，这是因为我们在使用了 Vue.use(VueMoment, { moment }) 后，便可以在任何组件中直接使用 $moment 函数。
2. 在 Vue 实例中使用
我们也可以在 Vue 实例中使用 $moment 函数。
-- -------------------- ---- -------
--- -----
--- -------
------ -
------ -
---------------- --
-
--
--------- -
-- ----------
-------------------- - --------------------------------- ----------
-
--这里我们通过在 mounted 函数中使用 $moment 函数获取并格式化了当前时间。
3. 在过滤器中使用
除了在组件和 Vue 实例中使用外，我们还可以将 $moment 函数作为过滤器使用。
-- -------------------- ---- -------
-------------------- -------- ------- ------------- -
-- -------- ------ --
----- -------------- - -------------------
-- -------------------------- -
------ -----------------------------------
- ---- -
------ --
-
--这里我们将 $moment 函数封装为了名为 moment 的过滤器。可以在组件中使用：
-- -------------------- ---- -------
----------
-----
---------- ----------- - ------------------ ---------- ------
------------- ----- ---------- - ------------------- ---------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------------ --- ------
-
-
-
---------示例代码
最后附上一个基于 @bordman1/vue-moment 的示例代码：
-- -------------------- ---- -------
----------
-----
---------- ---------------------------- ---------- ------
---
------ --------------------- ---------------------------- --
----
---
------ ---------------- ---------------------------- --
----
---
-------- ---------------- ------------------------------ --
----
---
-- ------- ----------------- ----------------------------- --
----
--- --
---------- ----------- - ------------------ ---------- ------
------------- ----- ---------- - ------------------- ---------- ------
------
-----------
--------
------ ------- -
------ -
------ -
------------ --- ------
-
--
--------- -
-------------- -- -
---------------- - --- ------
-- -----
-
-
---------以上便是本文对 @bordman1/vue-moment 的基本使用教程。通过学习和使用该库，我们可以方便地进行日期和时间的处理，提高我们开发的效率和编码的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056e8381e8991b448e74cd