普通做法就是
<li v-if="list.refundStatus==0">申请中</li>
<li v-else-if="list.refundStatus==1">服务商同意退款</li>
<li v-else-if="list.refundStatus==2">服务商拒绝退款</li>
但是嘛,这样写的话多几次你怕是想死,如果有十几种状态,那长长的十几行看着很想死。
其实vue有个filters叫过滤器,只要在过滤器里面定义好,然后到div使用就OK了
<li>{{list.refundStatus|filterA()}}</li>
filters:{
filterA(refundStatus){
switch (refundStatus) {
case 0:
return '申请退款中';
case 1:
return '服务商同意退款';
case 2:
return '服务商拒绝退款';
case 3:
return '退款成功';
case 4:
return '平台拒绝退款';
}
}
}
这样的话可复用性会更好,前端虽然是重复造轮子,但是复用性问题与维护问题也是需要考虑的哦