Vue v-for循环遍历数据，显示不同的class样式

布满荆棘的人生 2023-10-10 11:45 8阅读 0赞

#### 文章目录 ####

*   *  一、问题描述
     *  二、解决办法

### 一、问题描述 ###

需要为v-for循环出来的盒子的图标添加不同颜色css样式。  
![在这里插入图片描述][20201107231206641.png_pic_center]

### 二、解决办法 ###

`: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">
         
           <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>

*  结果：  
    ![在这里插入图片描述][20201107231719434.png_pic_center]

[20201107231206641.png_pic_center]: https://img-blog.csdnimg.cn/20201107231206641.png#pic_center
[20201107231719434.png_pic_center]: https://img-blog.csdnimg.cn/20201107231719434.png#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue2.x 循环img src遍历加载不同图片的方法

vue2.x 循环img src遍历加载不同图片的方法第一种，vue.js直接引入网页的模式 ![在这里插入图片描述][watermark_type_ZmFu...

你的名字/ 2024年04月17日 23:03/ 0 赞/ 41 阅读

相关 Vue v-for循环遍历数据，显示不同的class样式

文章目录一、问题描述二、解决办法一、问题描述需要为v-for循环出来的盒子的图标添加不同颜色css样式。 ![在这里插入图片

布满荆棘的人生/ 2023年10月10日 11:45/ 0 赞/ 9 阅读

相关 vue 循环遍历背景图

//循环背景图获取index <template> <div id="app"> <div class='pic'

缺乏、安全感/ 2023年06月25日 04:35/ 0 赞/ 1 阅读

相关【vue】vue循环遍历

> `前言` 转载：[https://juejin.cn/post/6844903814030426125][https_juejin.cn_post_68449038140

骑猪看日落/ 2022年12月25日 04:00/ 0 赞/ 265 阅读

相关 vue循环遍历map

<div class="form-group row" v-for="(item,index) in paramsMap" :key="index"> <!

r囧r小猫/ 2022年11月28日 13:54/ 0 赞/ 239 阅读

相关循环遍历的区别

循环遍历的区别 forEach 直接循环数组，没有返回值如何结束循环：是结束本次循环是可以使用return，但是结束全部循环return无效，原因

╰+攻爆jí腚メ/ 2022年11月20日 08:02/ 0 赞/ 226 阅读

相关 vue 第七天（循环遍历）

vue 第七天（循环遍历） v-for循环 1、v-for 遍历数组数组语法 v-for="(要循环的定义的变量,index 也就是下标) in 要循环的

￡神魔★判官ぃ/ 2022年11月05日 00:46/ 0 赞/ 247 阅读

相关 JS 循环遍历JSON数据

JSON数据如：\{"options":"\[\{/"text/":/"王家湾/",/"value/":/"9/"\},\{/"text/":/"李家湾/",/"valu

朱雀/ 2022年04月24日 04:14/ 0 赞/ 396 阅读

相关 vue项目查询后台数据循环遍历显示在页面上

效果如下 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

我会带着你远行/ 2022年02月02日 13:21/ 0 赞/ 495 阅读

相关 vue v-for 循环遍历注意事项

注意要把接管的id是循环遍历的标签的外标签，不然会报错，下图是正确 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sha

Bertha 。/ 2021年11月09日 03:34/ 0 赞/ 411 阅读