我有一個迭代color_attributes ：
<div v-for="colorAttribute of selectedProduct.color_attributes" :key="selectedProduct.id">
<span style="background: #{{colorAttribute}}"></span>
</div>
如何span動態更改背景顏色？
uj5u.com熱心網友回復：
您可以將樣式系結到物件：
<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}`">
uj5u.com熱心網友回復：
您可以使用模板文字動態系結顏色屬性值。
演示：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/484179.html
標籤：Vue.js