VueJS：v-bind:style 仅在 v-for 中有条件地工作答案

【问题标题】：VueJS: v-bind:style only working conditionally in v-forVueJS：v-bind:style 仅在 v-for 中有条件地工作
【发布时间】：2017-10-10 15:25:51
【问题描述】：

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

【问题讨论】：

标签： javascript vue.js v-for

【解决方案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 是一个变量。

【讨论】：