html
这段代码有一个不重复的id 可以以此区分颜色
<div class="left pleftr" style="width: 100%;background-color: #4bacc6;" :class="getbgc(item)">
<div class="leftop font12 flex" style="display: flex;justify-content:center;">
<div style="width: 70%;">[[item.kpi_name]]%</div>
<div style="width: 30%;text-align: right;">
<div>Rate</div>
<div>[[item.current_kpi_val]]%</div>
</div>
</div>
</div>
computed
computed:{
getbgc(){
return function(val) {
if(val.kpi_seq == '1') {
return 'color1'
}
if(val.kpi_seq == 2) {
return 'color2'
}
if(val.kpi_seq == 3) {
return 'color3'
}
if(val.kpi_seq == 4) {
return 'color4'
}
if(val.kpi_seq == 5) {
return 'color5'
}
if(val.kpi_seq == 6) {
return 'color6'
}
if(val.kpi_seq == 7) {
return 'color7'
}
if(val.kpi_seq == 8) {
return 'color8'
}
if(val.kpi_seq == 9) {
return 'color9'
}
}
}
},
css
.color1 {
background-color:#4babc5 !important;
}
.color2 {
background-color: #4d7db8 !important;
}
.color3 {
background-color: #1f487b !important;
}
.color4 {
background-color: #7e629f !important;
}
.color5 {
background-color: #d99593 !important;
}
.color6 {
background-color: #963634 !important;
}
.color7 {
background-color: #e26b0a !important;
}
.color8 {
background-color: #74913b !important;
}
.color9 {
background-color: #a5a5a5 !important;
}
效果图