Vue CSS 绑定
了解更多有关如何使用 v-bind 通过 style 和 class 属性修改 CSS 的信息。
虽然使用 v-bind 更改 style 和 class 属性的概念相当简单，但语法可能需要一些时间来适应。
Vue 中的动态 CSS
您已经了解了如何使用 Vue 通过在 style 和 class 属性上使用 v-bind 来修改 CSS。在本教程的 v-bind 部分已经简要说明了这一点，并且还提供了一些 Vue 更改 CSS 的示例。
在这里，我们将更详细地解释如何使用 Vue 动态更改 CSS。但首先，让我们看两个使用在本教程中已经看到过的技术的示例：使用 v-bind:style 的内联样式以及使用 v-bind:class 分配类。
内联样式
我们在 Vue 中使用 v-bind:style 来执行内联样式。
示例
使用内联样式，<input type="range"> 元素用于更改 <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 用法的一些不同方面。
- 当使用
class=""和v-bind:class=""将 CSS 类分配给 HTML 标签时，Vue 会合并这些类。 - 使用
v-bind:class="{}"分配包含一个或多个类的对象。在对象内部，可以打开或关闭一个或多个类。 - 使用内联样式 (
v-bind:style) 在定义 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> 元素可以同时属于 'impClass' 和 'yelClass' 类，具体取决于布尔型 Vue 数据属性 'isYellow' 和 'isImportant'。
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
此标签可以同时属于 'impClass' 和 'yelClass' 类。
</div>
自己尝试 »
3. 使用 'v-bind:style' 的驼峰式命名法与连字符命名法
当使用内联样式 (v-bind:style) 在 Vue 中修改 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>
自己尝试 »
'驼峰式命名法' 和 '连字符命名法' 是在不使用空格或标点符号的情况下写一系列单词的方式。
- **驼峰式命名法**是指第一个单词以小写字母开头，后面的每个单词都以大写字母开头，例如 'backgroundColor' 或 'camelCaseNotation'。之所以称为驼峰式命名法，是因为我们可以想象每个大写字母都像驼峰一样。
- **连字符命名法**是指单词之间用连字符
-分隔，例如 'background-color' 或 'kebab-case-notation'。之所以称为连字符命名法，是因为我们可以想象连字符像 '烤肉串' 中的串肉签一样。
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>
自己尝试 »
