Vue中使用時間過濾器——date-fns

一、date-fns與moment比較

moment打包后最終壓縮是68kb多，而date-fns打包后最后壓縮只有5kb多，

 

 

 

 

 

 

二、date-fns使用

2.1.安裝date-fns

npm install --save date-fns

2.2.在js文件中引用

/* filters.js */
import Vue from 'vue'
// import moment from 'moment'
import format from 'date-fns/format'
// 自定義過濾器
Vue.filter('date-format', function (value, formatStr='yyyy-MM-dd HH:mm:ss') {
  // return moment(value).format(formatStr)
  return format(value, formatStr)
})

2.3.在main.js入口文件中導入

import './filters'// 加載過濾器

2.4.在頁面中使用

<div class="time">{{rating.rateTime | date-format}}</div>