v-bind:style 语法在内联样式中不起作用答案

【问题标题】：v-bind:style syntax not working in inline stylesv-bind:style 语法在内联样式中不起作用
【发布时间】：2016-12-01 18:39:39
【问题描述】：

我对 Vue 相当了解，整个 v-bind 事情让我陷入了困境......

基本上，我正在尝试实现这种语法，但使用 Vue 的 v-bind，因为我不能在内联 CSS 样式中使用变量：

<div class="card" style="background-color: {{school.color}}">

这是我从他们的文档中遵循的 Vue 语法，但它仍然抛出错误，我不知道为什么？显然，它必须是一些简单的东西，我只是还没有完全理解 Vue 的复杂性！

<div class="card" :style="{ background-color: school.color }">

任何帮助将不胜感激！

【问题讨论】：

【解决方案1】：

对于object syntax bindings，您正在绑定一个对象。因此，密钥必须有效，并且需要引用，除非它们是valid unquoted keys。破折号- 不允许出现在未加引号的键中，因此无法编译。

这些选项中的任何一个都可以使用：

<div class="card" :style="{ 'background-color': school.color }">

或

<div class="card" :style="{ backgroundColor: school.color }">

【讨论】：