在绑定color
时,使用v-bind:style
可以正常工作:
<p v-bind:style="{ color: '#' + tradingCardOption.BorderColorHex }">
{{ tradingCardOption.ColorSetName }}
</p>
但是,绑定到background-color
不起作用:
v-bind:style="{ background-color: '#' + tradingCardOption.BorderColorHex }"
绑定到border-top
也没有:
v-bind:style="{ border-top: 15px solid + '#' + tradingCardOption.CornerColorHex }"
是什么导致它如此有条件地工作?
<div v-for="tradingCardOption in tradingCardOptions">
<div v-bind:style="{ background-color: '#' + tradingCardOption.BorderColorHex}" class="color-swatch " v-bind:class="{'selected' : $index == 0}" v-on:click="selectTradingCardOption(tradingCardOption, $event)">
<div v-bind:style="{ border-top: 15px solid + '#' + tradingCardOption.CornerColorHex}"></div>
</div> {{ tradingCardOption.BorderColorHex}}
<p v-bind:style="{ color: '#' + tradingCardOption.BorderColorHex}"> {{ tradingCardOption.ColorSetName }}</p>
</div>
如果使用的
键名不是有效标识符,则必须正确引号。所以v-bind:style="{ background-color: '#' + tradingCardOption.BorderColorHex}"
必须是
v-bind:style="{'background-color': '#' + tradingCardOption.BorderColorHex}"
因为除非用引号括起来background-color
否则不能用作对象属性键。与border-color
相同,它应该是:
{'border-top': '15px solid #' + tradingCardOption.CornerColorHex}
基本上,您需要确保解析器不会尝试将-
字符解释为减号,然后认为border
是一个变量。