Question

这可能有一个简单的解决方案，因为我使用过vue已经有一段时间了：

我正在尝试将从颜色列表中提取的数据传递到内联css以更改每个项目的背景颜色，这是一个示例：

<ul>
  <li v-for="color in colors">{{ color.value }}</li>
</ul>

<script>
  new Vue({
    el: '#main',
    data: {
        colors: [
            { value: '#00205b'},
            { value: '#0033a0'},
            { value: '#0084d4'}
        ],
    }
  })
</script>

我想使用从color.value中提取的数据并将其放入类似v-bind:style="background-color: { color.value }"的内容，但我无法弄清楚如何使其发挥作用。

Answer 1

你可以这样使用:(见style binding）

<li v-for="color in colors" v-bind:style="{backgroundColor: color.value}">
{{ color.value }}
</li>

或者，

:style="{'background-color': color.value}"

Answer 2

您可以创建一个计算属性，并使用样式属性扩展color数组中的每个colors对象。此样式属性将包含每个元素的样式。

最后，使用v-for指令中的computed属性而不是原始数组。

＆＃13;

new Vue({
  el: '#list',

  data() {
    return {
      colors: [{
          value: '#00205b'
        },
        {
          value: '#0033a0'
        },
        {
          value: '#0084d4'
        }
      ],
    };
  },

  computed: {
    extendedColors() {
      return this.colors.map(color => ({ ...color,
        style: {
          backgroundColor: color.value
        }
      }));
    },
  }
})

＆＃13;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<ul id="list">
  <li v-for="color in extendedColors" :style="color.style">
    {{ color.value }}
  </li>
</ul>

＆＃13;

如何在v-bind：style的内联css中使用v-for list中的数据？

2 个答案: