vue.js - Vue根据对象值分配样式

Question

如果我在模板中呈现列表：

<div v-for"item in items">
{{item.name}}
</div>

而item.background对应一个颜色值，如何设置div的背景颜色为item.background？

标签： vue.js

Answer 1

v-bind:style您可以使用或使用:style速记绑定内联样式。

<div v-for"item in items" :style="{ backgroundColor: item.background }">
  {{item.name}}
</div>

您应该阅读Class and Style Binding Guide。