vueで日付書式設定プラグインdayjsを使用する方法

1.dayjsをダウンロードする

cnpm install dayjs --save

2. untils/format.jsを作成する

import dayjs from 'dayjs'
import rTime from 'dayjs/plugin/relativeTime'

// 全局使用中文
dayjs.locale('zh-cn')

// 对时间进行格式化
export function formatTime(data = new Date(), type = 'YYYY-MM-DD') {
  return dayjs(data).format(type)
}

// 其它例如相对时间，需要单独配置它自己的插件才可以使用
dayjs.extend(rTime)

export const relativeTime = value => {
  return dayjs().to(dayjs(value))
}

export default {
  formatTime,
  relativeTime
}

3. グローバル、パッケージフィルター、main.js を待ちます。

import { formatTime, relativeTime } from './utils/formate'

Vue.prototype.$formatTime = formatTime
Vue.prototype.$relativeTime = relativeTime

// 过滤器
Vue.filter('relativeTime', relativeTime)
Vue.filter('formatTime', formatTime)

4.js環境での利用

this.$formatTime(new Date(),'YYYY-MM-DD')

5. Vue テンプレートでのフィルターの使用

 {
   
   {new Date()|formatTime}}
 {
   
   {new Date('2022-01-01')|relativeTime}}