VueJS：v-bind：樣式僅在v-for中有條件地工作

Question

使用v-bind:style在綁定color時工作正常：

<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> 

Answer 1

如果使用非有效標識符的鍵名，則必須正確引用對象鍵。 所以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是一個變量。