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

 

<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>