时间格式化

1.处理相对时间

推荐两个第三方库：

• 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 大小的微型库

• 👫 全浏览器兼容

基本使用

1、安装

方法一：
npm i dayjs

方法一：

yarn add dayjs

2、使用最基本的dayjs

import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
​
dayjs.locale('zh-cn')
​
console.log(dayjs().format('YYYY-MM-DD'))

3、在 main.js 中加载初始化

import './utils/dayjs'

eg:使用dayJs处理时间

1、定义过滤器

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().to(dayjs(value))
    //或者 return dayjs(value).fromNow()
})

2、使用过滤器：

<p>{{ 日期数据 | relativeTime }}</p>