我们经常会遇到一种情况，打个比方，我们需要显示商品的状态。
状态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: "袜子" },
],
