Vue.JS v-bind：样式语法不起作用？

Question

我对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 }">

非常感谢任何帮助！

Answer 1

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

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

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

或

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