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>
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js