vue.js - 如何绑定(bind)内联样式？

Question

我一直在关注指南:https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-Inline-Styles用于 VueJS 中的内联 css。然而，在某些情况下，它不起作用。

:style="{ background: colorSelected }" // working

以下给出错误提示:- 无效表达式::style="{ border-color-left: colorSelected }"

:style="{ border-color-left: colorSelected }" // not working

Answer 1

对象字面量的 JavaScript 语法无效。对象属性需要有引号:

:style="{ 'border-left-color': colorSelected }"

或者你可以像这样指定它(特定于 Vue):

:style="{ borderLeftColor: colorSelected }"

样式也是 border-left-color 而不是 border-color-left。