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

对于对象语法绑定,您绑定对象.因此,密钥必须是有效的,并且需要被引用,除非它们是有效的不带引号的密钥.-不带引号的密钥中不允许使用破折号,因此无法编译.

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

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

要么

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