vue 循环出来的三个标签加不同的颜色

最新推荐文章于 2025-06-04 10:58:06 发布

南城夏季

最新推荐文章于 2025-06-04 10:58:06 发布

阅读量1.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： BUG js vue

本文链接：https://blog.youkuaiyun.com/weixin_39818813/article/details/82256247

vue 同时被 3 个专栏收录

115 篇文章

订阅专栏

105 篇文章

订阅专栏

BUG

86 篇文章

订阅专栏

博客围绕vue循环通过后台接口获取三张图片，并为每张图片添加不同背景颜色的需求展开。提到三目运算只能给两个元素添加颜色，可通过下标区分实现，还给出代码示例，并提醒v-for要写index，样式名要用引号包裹，避免报错。

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

需求：vue循环通过后台接口获得三张图片，给每张图片加不同的背景颜色。

通过三目运算的话只能给其中两个元素添加颜色。

通过下标区分：

代码如下：

html:


        <div class="mainBox">
          <div class="city-box" v-for="(tab_list,index) in home_list" :key="tab_list.id">
            <div class="img-box">
              <router-link :to="tab_list.aLink">
                <img :src="tab_list.aImages" alt="">
                <div class=" same-three" :class="sstt[index]">
                  <div class="city">{{tab_list.aTitle}}</div>
                  <div class="split-line">|</div>
                  <div class="price">${{tab_list.aPrice}}</div>
                </div>
              </router-link>
            </div>
          </div>
        </div>

js:

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

css:

.ss1{
    background: red;
  }
  .ss2{
    background: yellow;
  }
  .ss3{
    background: black;
  }

注意：1.v-for 要写index 不然sstt[index] 会报错，index不存在。

2.sstt是一个数组，里面的三个样式名要用“”包裹，不然会当做一个变量，报错