在循环中制作动态背景颜色

Question

我有一个迭代 color_attributes :

  <div v-for="colorAttribute of selectedProduct.color_attributes" :key="selectedProduct.id">
      <span class="color-attribute" style="background: #{{colorAttribute}}"></span>
  </div>

如何动态更改 span 背景颜色？

Answer 1

您可以将样式绑定到对象：

<div v-for="colorAttribute of selectedProduct.color_attributes" :key="selectedProduct.id">
    <span class="color-attribute" :style="{background: '#'+colorAttribute}"></span>
 </div>

或使用字符串模板：

<span class="color-attribute" :style="`background: #${colorAttribute}`">

Answer 2

您可以使用 template literals 动态绑定颜色属性值。

演示 :

new Vue({
  el: '#app',
  data: {
    selectedProduct: {
        color_attributes: ['green', 'blue', 'yellow']
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(colorAttribute, index) of selectedProduct.color_attributes" :key="index">
      <span class="color-attribute" :style="`background: ${colorAttribute}`"> {{ colorAttribute }} </span>
  </div>
</div>

在循环中制作动态背景颜色

Making dynamic background colors in loop

vue.js