vue中v-for循环中class变量带入与style变量带入

2021-12-01  本文已影响0人  小岛wink

常常遇到动态获取数据后,对应的样式也要根据数据做相应修改,查了一下可以这样实现:
1、场景:模块中循环四组数据显示,对应区域的背景图片要根据类型值展示对应的图;实现效果(因为值一样所以图一样)


image.png

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>
上一篇 下一篇

猜你喜欢

热点阅读