vue——如何给v-for循环出来的元素设置不同的样式

最新推荐文章于 2025-07-06 22:51:21 发布

原创最新推荐文章于 2025-07-06 22:51:21 发布 · 1.5w 阅读

27 ·

CC 4.0 BY-SA版权

本文介绍了在Vue中给v-for循环出来的元素设置不同样式的方法。通过示例代码展示，先给循环盒子动态绑定class名并传入数组，在data里定义该数组，最后在style中分别设置颜色，即可完成不同样式的设置，如给四个盒子设置不同背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue——如何给v-for循环出来的元素设置不同的样式

<template>
<div>
<div v-for="(i,a) in serve" class="sever_box2">
<div :class="sstt[a]">
<img :src="i.imgs" alt="" />
<router-link :to="i.url">
<span>{{i.title}}</span>
</router-link>
<p>{{i.english}}</p>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
sstt: [
"ss1",
"ss2",
"ss3",
"ss4",
],
serve: [
{
title: "苹果",
english: "123"
},
{
title: "桃子",
english: "456"
},
{
title: "香蕉",
english: "789"
},
{
title: "梨",
english: "1010"
}

]


}

}
}
</script>
<style>
.ss1{
background: #71b262;
color: red;
}
.ss2{
background: #6288b2;
}
.ss3 {
background: #ecac60;
}
.ss4{
background: #f87171;
}

</style>

例如给循环出来的四个盒子设置不同的背景色
第一步：给要循环的盒子动态绑定class名并且传入一个数组

       <div v-for="(i,a) in serve" class="sever_box2">
            <div :class="sstt[a]">
              <img :src="i.imgs" alt=""/>
              <router-link :to="i.url">
                <span>{{i.title}}</span>
              </router-link>
              <p>{{i.english}}</p>
            </div>
          </div>

第二步：在data中定义这个数组

data() {
      return {
        sstt: [
          "ss1",
          "ss2",
          "ss3",
          "ss4",
        ]
      }

第三步：在style中分别设置颜色

.ss1{
    background: #71b262;
  }
  .ss2{
    background: #6288b2;
  }
  .ss3 {
    background: #ecac60;
  }
  .ss4{
    background: #f87171;
  }

完成啦
在这里插入图片描述