css数据不固定情况下,循环加不同背景颜色

javascript 复制代码
<template>
  <div>
    <p v-for="(item, index) in items" :key="index" :class="getBackgroundClass(index)">
      {{ item }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['学不会1', '学不会2', '学不会3', '学不会4', '学不会5']
    };
  },
  methods: {
    getBackgroundClass(index) {
      const classes = ['bg-pink', 'bg-light-blue', 'bg-light-green', 'bg-gold', 'bg-salmon'];
      return classes[index % classes.length];
    }
  }
}
</script>

<style scoped>
.bg-pink {
  background-color: #FFC0CB;
}

.bg-light-blue {
  background-color: #ADD8E6;
}

.bg-light-green {
  background-color: #90EE90;
}

.bg-gold {
  background-color: #FFD700;
}

.bg-salmon {
  background-color: #FFA07A;
}
</style>
相关推荐
JarvanMo1 分钟前
我差点放弃移动开发(以及是什么让我回来了)
前端
爱学习的茄子2 分钟前
回流与重绘:性能优化的幕后英雄
前端·javascript·深度学习
Mintopia3 分钟前
计算机图形学中的摄像机系统:从像素世界的眼睛说起
前端·javascript·计算机图形学
信也科技布道师3 分钟前
高安全前端架构:Rust-WASM 黑盒技术揭秘
前端
understandme4 分钟前
维护 mysql 老代码的 json 的坑
javascript·后端
G等你下课14 分钟前
动手实现一个简易前端路由:理解 React Router 的本质
前端·javascript·react.js
Mintopia14 分钟前
Three.js 3D 柱状图制作指南:从像素到立体的魔法之旅
前端·javascript·three.js
南岸月明14 分钟前
新人开启副业,这些坑你一定要知道
前端
懒羊羊大王&19 分钟前
5、qt系统相关
前端·qt
魔都吴所谓20 分钟前
【Echarts】 电影票房汇总实时数据横向柱状图比图
javascript·ecmascript·echarts