推薦兩個(gè)第三方庫(kù)：

Moment.js

Day.js

兩者都是專門用于處理時(shí)間的 JavaScript 庫(kù)，功能差不多，因?yàn)?Day.js 的設(shè)計(jì)就是參考的 Moment.js。但是 Day.js 相比 Moment.js 的包體積要更小一些，因?yàn)樗捎昧瞬寮奶幚矸绞健?/p>

Day.js 是一個(gè)輕量的處理時(shí)間和日期的 JavaScript 庫(kù)，和 Moment.js 的 API 設(shè)計(jì)保持完全一樣，如果您曾經(jīng)用過(guò) Moment.js, 那么您已經(jīng)知道如何使用 Day.js 。

Day.js 可以運(yùn)行在瀏覽器和 Node.js 中。
🕒 和 Moment.js 相同的 API 和用法
💪 不可變數(shù)據(jù) (Immutable)
🔥 支持鏈?zhǔn)讲僮?(Chainable)
🌐 國(guó)際化 I18n
📦 僅 2kb 大小的微型庫(kù)
👫 全瀏覽器兼容

下面是具體的操作流程。

Dayjs官方文檔

安裝 dayjs：

npm install dayjs --save

創(chuàng)建封裝 utils/dayjs.js：

import Vue from 'vue' import dayjs from 'dayjs'// 加載中文語(yǔ)言包 import 'dayjs/locale/zh-cn'import relativeTime from 'dayjs/plugin/relativeTime'// 配置使用處理相對(duì)時(shí)間的插件 dayjs.extend(relativeTime)// 配置使用中文語(yǔ)言包 dayjs.locale('zh-cn')// 全局過(guò)濾器：處理相對(duì)時(shí)間 Vue.filter('relativeTime', value => {return dayjs().from(dayjs(value)) })

在 main.js 中加載初始化：

import './utils/dayjs'

使用過(guò)濾器：

<span>{{ article.pubdate | relativeTime }}</span>

案例：結(jié)合vue的過(guò)濾器使用

總結(jié)

以上是生活随笔為你收集整理的处理相对时间(Day.js、Moment.js)（案例：结合vue的过滤器使用）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。