vue过滤器filter

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模板中使用

{{item.order_state | setOrderStatus}}

//注意:setOrderStatus就是我们过滤器的名字

9.效果如下:

10.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。