1.开发环境 vue
2.电脑系统 windows10专业版
3.在vue开发的过程中,咱们常常会遇到一些需要须要应用到过滤器,上面我来简略的分享一下应用。
4.常见我的项目需要:
当初有订单列表接口,后盾返回的有订单状态(字段)然而都是对应的数字(在接口文档中阐明数字的含意),咱们在页面展现的时候不能去展现数字,这个时候怎么办呢?此时就用到了过滤器,如果做呢?5.个别状况下还是要把过滤器进行文件分类,这样构造清晰:
在src目录下新建filters(名字能够本人定义)6.在cflilters/index中增加如下代码:
let setOrderStatus = status => { switch (status) { case 1: return "待付款"; break; case 2: return "代发货"; break; case 3: return "配送中"; break; case 4: return "确认收货"; break; case 5: return "已实现"; break; case 6: return "转让中"; break; case 7: return "已转让"; break; default: break; }}export default { setOrderStatus}7.在main.js中增加如下代码:
// 导入 全局过滤器import cfilters from './cfilters/index';Object.keys(cfilters).forEach(key => { Vue.filter(key, cfilters[key])})8.在vue模板中应用
<span>{{item.order_state | setOrderStatus}}</span>//留神:setOrderStatus就是咱们过滤器的名字9.成果如下:
10.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。