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

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 you are binding an object. Thus, the keys must be valid, and need to be quoted unless they are valid unquoted keys。破折号 - 不允许出现在未加引号的键中，因此无法编译。

以下任一选项均可：

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

或

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

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

v-bind:style syntax not working in inline styles

inline-styles

vue.js