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>
相关推荐
灵感__idea5 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡6 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo6 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel6 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
_小许_6 小时前
Go语言实现HTML转PDF
golang·pdf·html
大前端helloworld6 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel6 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi7 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904278 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki8 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构