一、描述
有三种颜色,根据条件的不同,显示三种颜色,要是俩种还好说,可以利用三元运算符,默认给定一个颜色,另外一个通过类名绑定上去。要是,三种,或者很多种了,就算动态绑定,绑一大推在标签上又难看死!
比如:
根据领取的状态不同,展示不同的颜色,这里就有三种。
二、实现
我是这么做的,通过动态绑定的方式,不过我是绑定一个方法,通过方法去判断,然后返回不同的类名,return出去。
<view :class="['status',getcol(item.status)]">
{{item.status}}
</view>
methods: {
getcol(status) {
console.log("status",status);
if(status == '未领取') {
return "red"
} else if(status == '我已领取') {
return "blue"
} else {
return "gray"
}
}
}
.red {
color: #D82B2B !important;
}
.blue {
color: #509BEA !important;
}
.gray {
color: #858788 !important;
}
不复杂,就是给他绑定了一个方法,通过方法返回类名,看看就能懂。