vue中过滤器filter的全局封装和使用

在前后端分离的项目中，经常会有后台返回的数据需要进过处理才能显示到页面上的场景。

举例子 接口返回的是0 页面显示 女 ; 接口返回1 页面显示男

可以在 filters 目录下新建一个 index.js 来存放所有的过滤器就足够了。

index.js 代码如下：

let sexIdcardFilter = (num) => {
  if (num === 0) {
    return '女'
  }
  if (num === 1) {
    return '男'
  }
}

export default {
  sexIdcardFilter
}

然后在 main.js 中引入注册即可使用：

import filters from './filters/index'

Object.keys(filters).forEach(key => Vue.filter(key, filters[key]))

在页面中使用：

<span>{{ sex | sexIdcardFilter}}</span>