vue中filter的使用

在src文件夹下新建文件filters.js

import Vue from 'vue'

// 将时间戳转化为2020-12-12 12:12:12格式
Vue.filter('ParseTime', function(time, cFormat) {
 if (arguments.length === 0) {
   return null
 }
 const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'
 let date
 if (typeof time === 'object') {
   date = time
 } else {
   if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
     time = parseInt(time)
   }
   if ((typeof time === 'number') && (time.toString().length === 10)) {
     time = time * 1000
   }
   date = new Date(time)
 }
 const formatObj = {
   y: date.getFullYear(),
   m: date.getMonth() + 1,
   d: date.getDate(),
   h: date.getHours(),
   i: date.getMinutes(),
   s: date.getSeconds(),
   a: date.getDay()
 }
 const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {
   const value = formatObj[key]
   // Note: getDay() returns 0 on Sunday
   if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
   return value.toString().padStart(2, '0')
 })
 return time_str
})


// 处理数字，添加数字千位符
Vue.filter('NumberFormat', function(value) {
 if (!value) {
   return '0'
 }
 const intPartFormat = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
 return intPartFormat
})

在main.js引入

import '@/utils/filter'// 全局过滤器函数

在所需页面使用

getDate() {
     this.time = new Date().getTime()
     console.log(this.time)//时间戳
     this.time = this.$options.filters['ParseTime'](this.time).substring(10,20)
     console.log(this.time)//处理过的时间
   }