关于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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。