Vue.JS v-bind:style 语法不起作用? [英] Vue.JS v-bind:style syntax not working?

问题描述

我对 Vue 相当了解，整个 v-bind 的事情都让我陷入循环......

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

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

任何帮助将不胜感激！

解决方案

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

以下任一选项都有效:

或

I'm fairly knew to Vue and the whole v-bind thing is throwing me for a loop...

Basically, I'm trying to achieve this syntax, but with Vue's v-bind, since I can't use a variable in an inline CSS style:

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

Here's my Vue syntax, which I've followed from their documentation, but it's still throwing an error and I can't figure out why? Obviously, it has to be something simple, I just don't fully understand the intricacies of Vue yet!

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

Any help would be much appreciated!

解决方案

For 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. Dashes - are not allowed in unquoted keys, so it fails to compile.

Either of these options will work:

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

or

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

这篇关于Vue.JS v-bind:style 语法不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！