Vue CSS 绑定
了解如何使用 v-bind 通过 style 和 class 属性修改 CSS。
虽然使用 v-bind 修改 style 和 class 属性的概念相当直接，但语法可能需要一些时间来适应。
Vue 中的动态 CSS
您已经看到我们如何使用 Vue 通过 v-bind 在 style 和 class 属性上修改 CSS。本教程已在 v-bind 部分简要解释了这一点，并且还提供了一些 Vue 更改 CSS 的示例。
在这里，我们将更详细地解释如何使用 Vue 动态更改 CSS。但首先，让我们看一下本教程中我们已经见过的两种技术：内联样式使用 v-bind:style 和使用 v-bind:class 分配类。
内联样式
我们在 Vue 中使用 v-bind:style 进行内联样式。
示例
使用 type="range" 的 <input> 元素用于通过内联样式更改 <div> 元素的不透明度。
<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
拖动上面的范围输入以在此处更改不透明度。
</div>
自己动手试一试 »
分配类
我们在 Vue 中使用 v-bind:class 为 HTML 标签分配类。
示例
选择食物图片。通过使用 v-bind:class 来突出显示所选食物，以显示您已选择的内容。
<div v-for="(img, index) in images">
<img v-bind:src="img.url"
v-on:click="select(index)"
v-bind:class="{ selClass: img.sel }">
</div>
自己动手试一试 »
分配类和样式的其他方法
以下是关于 v-bind:class 和 v-bind:style 用法的一些不同方面，这些方面在本教程中我们之前没有见过。
- 当 CSS 类通过
class=""和v-bind:class=""分配给 HTML 标签时，Vue 会合并这些类。 - 包含一个或多个类的对象使用
v-bind:class="{}"分配。在对象内部，一个或多个类可以打开或关闭。 - 使用内联样式 (
v-bind:style) 时，建议在定义 CSS 属性时使用驼峰式命名法，但如果 CSS 属性写在引号内，也可以使用“kebab-case”（短横线命名法）。 - CSS 类可以与数组/数组表示法/语法一起分配
这些要点将在下面更详细地解释。
1. Vue 合并 'class' 和 'v-bind:class'
在 HTML 标签属于通过 class="" 分配的类，并且也属于通过 v-bind:class="" 分配的类的情况下，Vue 会为我们合并这些类。
示例
一个 <div> 元素属于两个类：“impClass”和“yelClass”。“important”类使用 class 属性正常设置，而“yellow”类使用 v-bind:class 设置。
<div class="impClass" v-bind:class="{yelClass: isYellow}">
此 div 属于 'impClass' 和 'yelClass'。
</div>
自己动手试一试 »
2. 使用 'v-bind:class' 分配多个类
当使用 v-bind:class="{}" 将 HTML 元素分配给一个类时，我们可以简单地使用逗号分隔并分配多个类。
示例
一个 <div> 元素可以根据布尔 Vue 数据属性 'isYellow' 和 'isImportant' 属于 'impClass' 和 'yelClass' 类。
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
此标签可以同时属于 'impClass' 和 'yelClass' 类。
</div>
自己动手试一试 »
3. 'v-bind:style' 的驼峰式与短横线命名法
在 Vue 中使用内联样式 (v-bind:style) 修改 CSS 时，建议对 CSS 属性使用驼峰式命名法，但如果 CSS 属性在引号内，也可以使用“kebab-case”（短横线命名法）。
示例
在这里，我们用两种不同的方式为 <div> 元素设置 CSS 属性 background-color 和 font-weight：推荐的驼峰式 backgroundColor，以及不推荐的带引号的“kebab-case” 'font-weight'。两种选择都有效。
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
此 div 标签具有粉色背景和粗体文本。
</div>
自己动手试一试 »
“驼峰式”和“kebab-case”（短横线命名法）是写作一系列单词而不使用空格或标点符号的方法。
- 驼峰式命名法是指第一个单词以小写字母开头，之后每个单词都以大写字母开头，例如“backgroundColor”或“camelCaseNotation”。它之所以称为驼峰式，是因为我们可以想象每个大写字母都像骆驼背上的驼峰。
- Kebab case（短横线命名法）是指单词用连字符
-分隔，例如“background-color”或“kebab-case-notation”。它之所以称为 kebab case，是因为我们可以想象连字符就像“烤肉串”中的串。
4. 'v-bind:class' 的数组语法
我们可以使用数组语法与 v-bind:class 来添加多个类。使用数组语法，我们可以使用依赖于 Vue 属性的类和不依赖于 Vue 属性的类。
示例
在这里，我们使用数组语法设置 CSS 类“impClass”和“yelClass”。类“impClass”依赖于 Vue 属性 isImportant，而类“yelClass”始终附加到 <div> 元素。
<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
此 div 标签取决于 isImportant 属性，它属于一个或两个类。
</div>
自己动手试一试 »
