在前后端分离的项目中,经常会有后台返回的数据需要进过处理才能显示到页面上的场景。
举例子 接口返回的是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>