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 分配类
内联样式
我们使用 v-bind:style 在 Vue 中进行内联样式设置。
示例
<input type="range"> 元素用于使用内联样式更改 <div> 元素的不透明度。
<input type="range" v-model="opacityVal">
<div v-bind:style="{ backgroundColor: 'rgba(155,20,20,'+opacityVal+')' }">
拖动上面的范围输入以在此处更改不透明度。
</div>
分配类
我们使用 v-bind:class 为 Vue 中的 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 属性时，首选 camelCase，但如果写在引号内，也可以使用“kebab-case”。
CSS 类可以用数组/数组符号/语法来分配
下面将更详细地解释这些要点。
- 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>
- 使用 ‘v-bind:class’ 分配多个类
使用 v-bind:class=“{}” 将 HTML 元素分配给类时，我们可以简单地使用逗号分隔并分配多个类。
示例
<div> 元素可以同时属于 ‘impClass’ 和 ‘yelClass’ 类，具体取决于布尔 Vue 数据属性 ‘isYellow’ 和 ‘isImportant’。
<div v-bind:class="{yelClass: isYellow, impClass: isImportant}">
此标签可以同时属于 'impClass' 和 'yelClass' 类。
</div>
- 使用 ‘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>
'驼峰式大小写’和’短横线大小写’表示法是书写一系列单词而不使用空格或标点符号的方式。
骆驼式大小写表示法是指第一个单词以小写字母开头，而后面的每个单词都以大写字母开头，例如“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>
总结
本文介绍了Vue CSS 绑定的使用，如有问题欢迎私信和评论