一、问题描述
需要为v-for循环出来的盒子的图标添加不同颜色css样式。
二、解决办法
:class="'icon-'+sys.iconColor"
- 代码示例:
<el-col v-for="(sys, i) in sysArr" :key="sys.id" :xs="5" :sm="5" :lg="3" class="card-panel-col">
<a :href="sys.url" target="blank">
<div class="card-panel">
<!--循环添加class-css样式 -->
<div :class="'icon-'+sys.iconColor" class="card-panel-icon-wrapper">
<div>
<svg-icon :icon-class="sys.icon" class-name="card-panel-icon" />
</div>
<div class="card-panel-text">{{ sys.name }}</div>
</div>
</div>
</a>
</el-col>
- 结果: