vue怎样给v-for循环出来的元素动态设置不同的样式

最新推荐文章于 2024-07-19 13:22:33 发布

南北极之间

最新推荐文章于 2024-07-19 13:22:33 发布

阅读量3.2k

点赞数 3

分类专栏：前端开发文章标签： css html

本文链接：https://blog.csdn.net/qq_22182989/article/details/120832644

版权

前端开发专栏收录该内容

570 篇文章 52 订阅

订阅专栏

该博客介绍了如何在Vue.js中通过v-for指令动态地为每个元素生成不同的class，如class1、class2等，从而实现不同元素的样式定制。通过在模板中使用`:class`绑定表达式，将索引值转换为class名称，以此达到为每个循环元素赋予独特样式的目地。

摘要由CSDN通过智能技术生成

用：class即可
使用遍历时的索引值。动态生成不同的class比如class1，class2以此类推
我这里是把class从1开始。所以把索引加了个1。不加1的话，就是从class0开始
:class="‘fgc’+(index+1)"

代码：

            <div class="common-title-part-cont part-cont-rt-box">
              <el-row v-if="typeImg.length>0" :gutter="10">
                <el-col v-for="(item,index) in typeImg" :key="index" :span="24/typeImg.length">
                  <div :class="'fgc'+(index+1)">
                    <h2>{{ item.name }}</h2>
                  </div>
                </el-col>
              </el-row>
            </div>

然后再分别去给每个class设置不同的样式即可：
在这里插入图片描述
效果：