关于vue.js: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模板中应用

<span>{{item.order_state | setOrderStatus}}</span>

//留神:setOrderStatus就是咱们过滤器的名字

9.成果如下:

10.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。