通过事件
<div class='data-list' :style="{color: getColor(item)}" v-for="(item,index) in city" :key="index">
<div style="width: 100%;display: flex;">
<div style="width: 25%;">{
{
item.name }}</div>
<div :style="{width: '60%',display: 'flex',justifyContent:' space-around',color: getColor(item)}" v-for="(i,ind) in item.val" :key="ind" >
<p><span>{
{
i.no_rent_info.house_num }}</span></p>
<p><span>{
{
i.no_rent_info.room_num }}</span></p>
</div>
</div>
</div>
data(){
return{
colorObj: {
'-1': '#22c3eb',
'-2': 'darkblue',
'0': 'green',
'1': 'yellow',
'2': 'orange',
'3': 'red',
},
//例如数据
city:[
{
id: 'bj',
name: '北京',
val:[
{
out_house_info:{
today_new:1,
week_new:2,
month_new:3 ,
today_renew:1,
week_renew:2,
month_renew:1
},
in_house_info:{
today_new:1,
week_new:2,
month_new:3,
today_renew:1,
week_renew:2,
month_renew:1
},
no_rent_info:{
empty_warning:0, //根据这个字段判断颜色 0/1/2/3/-1/-2
house_num:1,
room_num:2
}
}
]
},
]
}
}
methods:{
getColor(item) {
//通过匹配值，下标
let warning = item.val[0].no_rent_info.empty_warning + ''
return this.colorObj[warning]
},
}