Vue CSS 绑定

Vue 中的动态 CSS

您已经了解了如何使用 Vue 来修改 CSSv-bind于style和class属性。本教程已对此进行了简要解释v-bind还给出了几个使用 Vue 更改 CSS 的示例。

这里我们将更详细地解释如何使用 Vue 动态更改 CSS。但首先让我们看两个使用我们在本教程中已经看到的技术的示例：v-bind:style并分配一个类v-bind:class

内联样式

我们用v-bind:style在 Vue 中进行内联样式设置。

分配类

我们用v-bind:class将类分配给 Vue 中的 HTML 标签。

分配类和样式的其他方法

以下是关于使用的不同方面v-bind:class和v-bind:style我们之前在本教程中没有见过：

1. 当 CSS 类被分配给 HTML 标签时class=""和v-bind:class=""Vue 合并了类。
2. 包含一个或多个类的对象被分配为v-bind:class="{}"。在对象内部，可以打开或关闭一个或多个类。
3. 具有内联样式（v-bind:style) 定义 CSS 属性时，首选驼峰命名法，但如果将其写在引号内，也可以使用“kebab-case”。
4. CSS 类可以使用数组/数组符号/语法进行分配

下面将更详细地解释这些要点。

1.Vue 合并 'class' 和 'v-bind:class'

当 HTML 标签属于指定的类时class=""，并且还被分配到一个类v-bind:class=""，Vue 为我们合并了类。

2. 使用“v-bind:class”分配多个类

将 HTML 元素分配给类时v-bind:class="{}"，我们可以简单地使用逗号来分隔和分配多个类。

3. Camel case 与 kebab case 表示法与 'v-bind:style'

当使用内联样式修改 Vue 中的 CSS 时（v-bind:style），建议对 CSS 属性使用驼峰命名法，但如果 CSS 属性在引号内，也可以使用“kebab-case”。

4. 'v-bind:class' 的数组语法

我们可以使用数组语法v-bind:class添加多个类。通过数组语法，我们可以使用依赖于 Vue 属性的类和不依赖于 Vue 属性的类。