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

通过事件

<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]
        },
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值