Vue封装全局过滤器Filters

封装全局的filters和对axios的二次封装很像，新建一个filters文件夹，新建index.js和filters.js

是为了提高开发效率，将多次调用的过滤器注册为全局过滤器

index.js

import Vue from 'vue'
import * as filters from './filters'  //相当于取出所有，别名，filters是一个对象

Object.keys(filters).forEach(key=>{
    console.log(key);         //不能理解的话打印一下就很直观
    console.log(filters[key]);
    Vue.filter(key,filters[key])
})

filters.js

export function getSex(value){
    switch (value) {
        case 'man':
          return '男';
        case 'woman':
          return '女';
        default:
          return value;
      }
};

//后面需要新增的过滤器继续添加在下面即可

不要忘记在main.js里面按照实际路径引入全局自定义组件

import './filters/index'

在页面中使用和局部的过滤器是一样的

但是不需要在filters：{} 里面定义了：

<template>
  <div class="demo">
    <ul>
      <li>{{man | getSex}}</li>
    </ul>
  </div>
</template>
<script>
export default{
  data(){
    return{
      man:'man',
    }
  }
}
</script>

如果不能理解，最后来看看刚刚打印的结果：

key其实就是函数名

filters[key]就是整个对象

是不是Vue.filter('getSex'，(value)=>{switch.....})呢

注意：写完后要注册新的全局filter就在filter.js里面不断添加就可以了，可以提高开发效率。

       不过不建议添加过多全局过滤器，只有单个页面用到还是直接写在页面中较好。