Vue CSS 绑定
内联样式
我们使用 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 属性时首选驼峰命名法，但如果将其写在引号内，也可以使用"kebab-case"。 - CSS 类可以使用数组/数组表示法/语法进行分配
下面对这些要点进行了更详细的解释。
<小时>1. Vue 合并 'class' 和 'v-bind:class'
如果 HTML 标签属于分配了 class="" 的类，并且也分配给了 v-bind:class="" 的类，Vue 会为我们合并这些类。
示例
b1 元素属于两个类:"impClass"和"yelClass"。 "impClass"类通过 class 属性以正常方式设置，"yelClass"类通过 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"的 kebab 大小写表示法
在 Vue 中使用内联样式修改 CSS 时（v-bind:style），建议对 CSS 属性使用驼峰命名法，但如果 CSS 属性在引号内，也可以使用"kebab-case"。
示例
在这里，我们以两种不同的方式为 <div> 元素设置 CSS 属性 background-color 和 font-weight:推荐的方式是使用 Camel case（驼峰）命名法 backgroundColor，不推荐使用 'kebab-case' 放在引号中 'font-weight'。 虽然两种选择都有效。
<div v-bind:style="{ backgroundColor: 'lightpink', 'font-weight': 'bolder' }">
此 div 标签具有粉红色背景和粗体文本。
</div>
亲自试一试 »
"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> 元素。
<div v-bind:class="[{ impClass: isImportant }, 'yelClass' ]">
此 div 标签属于一个或两个类，具体取决于 isImportant 属性。
</div>
亲自试一试 »
