vue自定义全局过滤器filter

原理步骤如下：

1. 将filter方法暴露出来
2. 挂载在vue实例上
3. 直接使用

对应的操作为：

1. 在公共方法文件夹utils内新建filters.js文件
2. 在main.js中对filters中暴露的方法进行挂在vue中
3. 在项目任意页面直接使用

以时间过滤为例，代码如下：

filters.js

// 此文件为公共的全局过滤器

// 时间戳格式化过滤器，传参如下：
// value：时间戳，string，number均可
// num：返回样式，默认1（1：2020/12/16）（2：2020-12-16 12：12：12）
exports.formatDate = (value,num=1)=>{
  if(!vulue ) return "未传入时间戳";
  const date = new Date(+value)
  const y = date.getFullYear()
  let MM = date.getMonth() + 1
  MM = MM < 10 ? ('0' + MM) : MM
  let d = date.getDate()
  d = d < 10 ? ('0' + d) : d
  let h = date.getHours()
  h = h < 10 ? ('0' + h) : h
  let m = date.getMinutes()
  m = m < 10 ? ('0' + m) : m
  let s = date.getSeconds()
  s = s < 10 ? ('0' + s) : s
  if(+num === 1){
    return y + '/' + MM + '/' + d 
  }else if(+num === 2){
    return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
  }
}

// 价格格式化过滤器，传参如下：
// value：价格，string，number均可
exports.formatPrice = (value)=>{
	...
	// 格式化的代码逻辑
	...
}

...

main.js

import Vue from 'vue'
import App from './App'
import filters from './utils/filters'
Object.keys(filters).forEach(key => Vue.filter(key, filters[key]));
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

任意页面：

<span>时间：{{time | formatDate}}</span>
<span>价格：{{price | formatPrice}}</span>