多个三元的嵌套

三元表达式的嵌套使用
在vue项目中,动态绑定class或style时,常常会用到三元表达式。

三元表达式的普通用法：a = 条件？值1：值2
三元表达式的嵌套用法：a = 条件1？值1 : (条件2？值2 : 条件3？值3：值4)
嵌套写法相当于：
if (条件1) {
    a = 值1；
}else if (条件2){
    a = 值2；
}else if (条件3){
    a = 值3；
}else {
    a = 值4；
}
 

最近在一个vue项目中要实现这样的一个效果

这里没有用图表制作，发现手写的css更简单

比较常见的就是变量是两个值，直接写一个三元表达式就可以解决

<el-button :style="{'color':status === true ? '#FF5757':'#757575'}">按钮</el-button>

遇到多个的话开始嵌套多个三元

:style="item.state==1?'border-color:rgb(3, 152, 36)':(item.state==2?'border-color:rgb(142,152,72)':'border-color:rgb(104,34,56)')"

效果图如下

但是七八个嵌套起来代码又贼麻烦 然后我就想可以直接在接口返的数据中添加一个字段，把颜色给存进去  后面就是正常的在v-for循环中给一个变量值就ok