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

常常遇到动态获取数据后，对应的样式也要根据数据做相应修改，查了一下可以这样实现：
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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容