使用循环Vuejs更改div的背景颜色答案

【问题标题】：Change the background color of a div using a loop Vuejs使用循环Vuejs更改div的背景颜色
【发布时间】：2020-12-31 19:44:30
【问题描述】：

我正在使用 v-for 在 VueJs 中加载仪表板数据。

<b-row>
  <b-col cols="12" sm="6" md="4" lg="3" v-for="(item, key) in dashboardItems" :key="key">
    <b-card class="mb-2 card-border change-color-div">
      <b-row>
        <b-card-title class="text-muted mb-0 title-text">{{ key }}</b-card-title>
      </b-row>
      <b-row>
        <b-card-text class="card-body-text">{{ item }}</b-card-text>
      </b-row>
    </b-card>
  </b-col>
</b-row>

输出如下所示

但我需要为每个b-card 显示不同的背景颜色。如何使用循环来做到这一点？

预期输出

【问题讨论】：

从 API 中询问颜色值，否则可以生成随机颜色或指定 7 种不同的颜色（如果您不希望颜色随机变化）

标签： vue.js background-color

【解决方案1】：

您可以指定循环对象中项目的颜色。例如：

dashboardItems: [
  {item: 'text1', color: 'grey', key: 234},
  {item: 'text2', color: 'blue', key: 2334},
]

然后在你的v-forloop 中你可以创建一个style binding

<b-col 
    cols="12"
    sm="6" 
    md="4" 
    lg="3" 
    v-for="(item, key) in dashboardItems" :key="key"
>
    <b-card 
        class="mb-2 card-border change-color-div"
        :style="{'background-color': item.color}"
    >
        ......
    </b-card>
</b-col>

【讨论】：