美文网首页
使用filter完成了对订单状态的显示

使用filter完成了对订单状态的显示

作者: 泪滴在琴上 | 来源:发表于2019-05-06 17:16 被阅读0次

项目中订单的状态多大7种,刚开始在html里面使用了三目运算符做的判断显示,显示效果极差,而且维护困难。但是采用filter不仅漂亮的多,后期的维护以及扩展都一幕了然

<div id="app">
        <ul>
            <!--添加两个过滤器,注意不要冲突,注意先后顺序-->
            <li v-for="item in list">{{item.id | statusToText | filterAdd2}}</li>
        </ul>
    </div>
filters: {
    statusToText(value) {
      let reValue;
      switch (value) {
        case 1:
          reValue = "代付款";
          break;
        case 2:
          reValue = "代发货";
          break;
        ... ...
      }
      return reValue;
    }
  }

或者

filters: {
    statusToText(value) {
      let reValue=new Map()
      reValue.set(1,'代付款')
      reValue.set(2,'代发货')
      ... ...
      return reValue.get(value);
    }
 }

相关文章

网友评论

      本文标题:使用filter完成了对订单状态的显示

      本文链接:https://www.haomeiwen.com/subject/aeydoqtx.html