CSS 绑定

内联样式

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

示例

<input type="range"> 元素用于通过使用内联样式来更改 <div> 元素的不透明度。

指定类别

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

示例

选择食物图像。 使用 v-bind:class 突出显示所选食物，以显示您所选择的食物。

分配类和样式的其他方法

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

1. 当 CSS 类分配给同时具有 class="" 和 v-bind:class="" 的 HTML 标签时，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 会为我们合并这些类。

示例

b1 元素属于两个类:"impClass"和"yelClass"。 "impClass"类通过 class 属性以正常方式设置，"yelClass"类通过 v-bind:class 设置。

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

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

示例

<div> 元素可以属于"impClass"和"yelClass"类，具体取决于布尔 Vue 数据属性"isYellow"和"isImportant"。

3. 骆驼式大小写与带有"v-bind:style"的 kebab 大小写表示法

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

示例

在这里，我们以两种不同的方式为 <div> 元素设置 CSS 属性 background-color 和 font-weight:推荐的方式是使用 Camel case（驼峰）命名法 backgroundColor，不推荐使用 'kebab-case' 放在引号中 'font-weight'。 虽然两种选择都有效。

"Camel case"和"kebab case"表示法是书写一系列没有空格或标点符号的单词的方法。

• 驼峰表示法是指第一个单词以小写字母开头，后面的每个单词都以大写字母开头，例如"backgroundColor"或"camelCaseNotation"。 之所以称为驼峰式，是因为我们可以想象每个大写字母都像骆驼背上的驼峰。
• Kebab case 表示法是用破折号 - 分隔单词，例如"background-color"或"kebab-case-notation"。 它被称为烤肉串表示法，因为我们可以想象破折号类似于"烤肉串"中的串。

4. 带有"v-bind:class"的数组语法

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

示例

在这里，我们使用数组语法设置 CSS 类"impClass"和"yelClass"。 类"impClass"依赖于 Vue 属性 isImportant，类"yelClass"始终附加到 <div> 元素。