vue 全局注册过滤器 filter

随着 vue 的脚手架不断更新，搭建项目的时候很多东西都需要我们自己来配置，比如说过滤器 filter。

以我个人习惯为例：
1、创建一个 filters.js 文件，在这里定义多个过滤器

//时间过滤器
let formatTime = time => {
    
    
	if (time) {
    
    
		var a = new Date(time).toJSON();
		var date = new Date(+new Date(a) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{
    
    3}Z/, '')
		return date
	}
}
export {
    
     formatTime };

2、在 main.js 里面引入，并使用

//过滤器
import * as filters from './filters/index.js'
Object.keys(filters).forEach(key => {
    
    
    Vue.filter(key, filters[key])
})

3、全局使用过滤器

<p>{
    
    {
    
     time | formatTime }}</p>

有一个问题：使用的时候 Object.keys 为什么这样写呢？

首先：
Vue.filter 方法接收两个参数（过滤器名，过滤器函数）

其次：
import * as filters from ‘./filters/index.js’ 这样引入会把 filter.js 文件里面暴露出来的过滤器全部通过 filters 获取到，filters 的数据结构是

{
    
    
	过滤器名1：过滤器函数1,
	过滤器名2：过滤器函数2,
}

使用 Object.keys 方法取出所有的 key 生成一个数组，用 forEach 遍历数组把 key 和对应的 value 作为参数传递给 Vue.filter 方法，这样就可以把每一个自定义的过滤器绑定到 vue 的 filter 上面。