vue后端传数值，前端显示文字的便捷处理方法

我们经常会遇到一种情况，打个比方，我们需要显示商品的状态。

状态state为代付款，代发货， 待收货，待评价，无状态五种，而后端返回给我们的是1,2,3,4,5这样的数值。

一开始我的处理方式是拿到数据之后遍历，挨个修改每个state的值，这样的话在修改提交的时候，又需要经历一遍遍历将state变为后端需要的数值，很麻烦，代码量也大大增加。

后来了解到利用filters和switch来处理，真的超级方便快捷，学习起来~~

补充：动态类名也可以是使用过滤器哦

//template
    <table border="1">
      <tr v-for="(item,index) in array" :key="index">
        <th>{{item.name}}</th>
        <th :class="item.status | filter2 | filter3">{{item.status | filter2}}</th>
      </tr>
    </table>

    //filters 数值转文字
    filter2: function (value) {
      switch(value){
        case 1:return `代付款`;
        case 2:return `代发货`;
        case 3:return `待收货`;
        case 4:return `待评价`;
        default:return `无状态`;
      }
    },  
    //文字转类名
    filter3: function (value) {
      switch (value) {
        case `代付款`:
          return 'red';
        case `代发货`:
          return 'yellow';
        case `待收货`:
          return 'blue';
        case `待评价`:
          return 'green';
        default:
          return 'white';
      }
    },

    //data
    array: [
        { status: 1, name: "衣服" },
        { status: 2, name: "裤子" },
        { status: 3, name: "内裤" },
        { status: 4, name: "秋衣" },
        { status: 5, name: "袜子" },
    ],