如何通过 v-bind:style 在内联 css 中使用 v-for 列表中的数据？

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

您可以像这样使用：（参见样式绑定）

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

或者，

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