vue封装多个filters全局过滤器在一个文件

实现的效果：
将所有的全局过滤器方法都放在filter.js文件中，在main.js进行全局注册，在其他vue组件中直接使用。

过滤器filters通常用来过滤一些状态为自己想要的形式，比如后台返回status

// num等于0， 1， 2
// 对应的状态 0：小甲鱼， 1： 带鱼， 2：美人鱼
status: num

这个时候过滤器就很方便了，如果只在某一个组件有这个状态，那直接在当前组件写个过滤器方法就行，如果在多个组件都用到这个状态，那么最好的方式就是将这个过滤器定义为全局过滤器，供多个组件通用，减少代码冗余度

直接上代码：

1、新建一个filters.js文件，内容如下：

const filters = {

  // 状态过滤器， 将数字0,1,2转化为对应文字状态
  // 状态(0：小甲鱼， 1： 带鱼， 2：美人鱼)
  deliverStatusFilter: function (val) {
    if (val == 0) {
      return '小甲鱼'
    } else if (val == 1) {
      return '带鱼'
    } else if (val == 2) {
      return '美人鱼'
    } else {
      console.log(val);
    }
  }，

  timeFilter: function (time) {
	  // 第二个过滤器
  }
  // 多个过滤器直接依次写在这里即可  
}

export default filters

2、在main.js中注册为全局路由器

import Vue from 'vue'
import filters from './util/filters.js'

// 这种方式可以将filters.js中的所有过滤器都注册
for (let key in filters) {
  Vue.filter(key, filters[key])
}

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

3、在组件中引用

<template>
	<div>
	  <p>不加过滤器：{{status}}</p>
	  <p>加过滤器后：{{status | deliverStatusFilter}}</p>
	</div>
</template>

<script>
export default {
	data () {
	  return {
	    status: 0
	  }
	}
}
</script>

展示效果：