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>
相关推荐
小于小于09126 分钟前
npx 与 npm 区别
前端·npm·node.js
望获linux24 分钟前
【实时Linux实战系列】实时 Linux 在边缘计算网关中的应用
java·linux·服务器·前端·数据库·操作系统
qq_2529241926 分钟前
PHP 8.0+ 现代Web开发实战指南 引
android·前端·php
Jeled26 分钟前
Android 本地存储方案深度解析:SharedPreferences、DataStore、MMKV 全面对比
android·前端·缓存·kotlin·android studio·android jetpack
Mintopia27 分钟前
🎨 AIGC 内容过滤技术:当创作的洪流遇上理性的堤坝
前端·javascript·aigc
Mintopia34 分钟前
⚙️ Next.js 缓存与队列:当数据与请求跳起“低延迟之舞”
前端·全栈·next.js
Shi_haoliu42 分钟前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
IT_陈寒1 小时前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&2 小时前
css word属性
前端·css
fruge4 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化