vue中v-for循环中class变量带入与style变量带入
2021-12-01 本文已影响0人
小岛wink
常常遇到动态获取数据后,对应的样式也要根据数据做相应修改,查了一下可以这样实现:
1、场景:模块中循环四组数据显示,对应区域的背景图片要根据类型值展示对应的图;实现效果(因为值一样所以图一样)

2、代码实现:in-back是固定样式,item.imgClass为动态图片样式
<div class="imgs-div" v-for="(item,index) in dialogTableData" v-if='index<4' :key="index">
<div :class="['in-back',item.imgClass]" style="width:100%;height: 100%">
<div class="imgs-title">{{item.demandTypeName}}</div>
<div class="imgs-desc">{{item.orgName}}发布了{{item.demandTypeName}}的{{item.demandName}}</div>
</div>
</div>
3、网上查询了下,如果是style动态展示,可这样:
<span :style="{color:item.title_color}">{{item.title}}</span>