推薦兩個第三方庫：

Moment.js

Day.js

兩者都是專門用于處理時間的 JavaScript 庫，功能差不多，因為 Day.js 的設計就是參考的 Moment.js。但是 Day.js 相比 Moment.js 的包體積要更小一些，因為它采用了插件化的處理方式。

Day.js 是一個輕量的處理時間和日期的 JavaScript 庫，和 Moment.js 的 API 設計保持完全一樣，如果您曾經用過 Moment.js, 那么您已經知道如何使用 Day.js 。

Day.js 可以運行在瀏覽器和 Node.js 中。
🕒 和 Moment.js 相同的 API 和用法
💪 不可變數據 (Immutable)
🔥 支持鏈式操作 (Chainable)
🌐 國際化 I18n
📦 僅 2kb 大小的微型庫
👫 全瀏覽器兼容

下面是具體的操作流程。

Dayjs官方文檔

安裝 dayjs：

npm install dayjs --save

創建封裝 utils/dayjs.js：

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

在 main.js 中加載初始化：

import './utils/dayjs'

使用過濾器：

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

案例：結合vue的過濾器使用

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。