根据接口返回字段改变颜色

通过事件

<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]
        },
}