Блог

Главная - Вопросы по программированию - Измените цвет фона div с помощью loop Vuejs

Измените цвет фона div с помощью loop Vuejs

#vue.js #background-color

#vue.js #цвет фона

Вопрос:

Я использую 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 . Как я могу сделать это с помощью цикла?

ожидаемый результат

введите описание изображения здесь

Комментарии:

1. задайте значение цвета из API, в противном случае вы можете сгенерировать случайные цвета или указать 7 разных цветов (если вы не хотите, чтобы цвет менялся случайным образом)

Ответ №1:

Вы можете указать цвет элемента в объекте цикла. Например:

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

Затем в вашем v-for цикле вы можете создать привязку стиля

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