uni/vue 判断动态显示不同背景颜色

最新推荐文章于 2023-09-02 17:13:19 发布

nicehe

最新推荐文章于 2023-09-02 17:13:19 发布

阅读量1.5k

点赞数 3

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/nicehe/article/details/125019105

版权

1.后台数据

data:[{type:1,name:"好看"},
      {type:0,name:"报看"},
      {type:3,name:"养眼"},
      {type:2,name:"辣眼"}]

2.根据style属性进行判断动态改变背景颜色

<view class="card" v-for="(item,index ) in data" :key="index"
			:style="{'background':item.type===1?'#d04d24':item.type===0?'rgb(40, 122, 187)':item.type===2?'rgb(80, 148, 83)':'rgb(121, 116, 116)'}">
			<view style="font-size: 16px;">等级:{{item.name}}</view>
			</view>
		</view>