三元表达式判断多个状态的使用方法?

在做项目时候遇到一个参数四种状态,后来查了一下三元的多种使用方法
如下:

<view class="check-info">账单状态: <span class="check-item" :class="{greenFont:item.status==0, blueFont:item.status==1, yellowFont:item.status==2, redFont:item.status==9}">{
    
    {
    
    item.status==0?"待确认" : (item.status==1 ? "待支付" :(item.status==2 ? '已支付' : '过期'))}}</span></view>

不同状态文字颜色不同
.redFont{
color: #737373;
}
.greenFont{
color: #DD524D;
}
.blueFont{
color: #F0AD4E;
}
.yellowFont{
color: #18B566;
}
希望能够帮助到屏幕前的你,谢谢!!!

猜你喜欢

转载自blog.csdn.net/weixin_44237840/article/details/113260999