# Vue3教程 - 11 Vue中的样式
和 Vue2 中的用法基本一样。
在 HelloWorld 中有讲到，在 Vue 组件中通过 <style scoped> 标签来定义样式，这些样式只对当前的组件生效。
在 Vue 中，还可以使用 class 样式和内联样式。
# 11.1 class 样式
首先定义样式：
<style scoped>
.red {
color: red;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
除了可以使用原始的普通的方式设置 class 样式。
在 Vue 中有 4 种使用样式的方式，使用 v-bind:class 完成：
<!-- 结构 -->
<template>
<div id="root">
<!-- 0. 普通方式的设置class样式 -->
<h1 class="red italic">逗比笔记</h1>
<!--
1. 使用数组传递样式class名称，注意：这里的class需要使用v-bind做数据绑定。
这种方式较普通方式没有更加方便，没有什么优点。
-->
<h1 :class="['red', 'italic']">逗比笔记</h1>
<!-- 2. 在数组中使用三元表达式 -->
<h1 :class="['red', 'italic', flag ? 'active' : '']">逗比笔记</h1>
<!-- 3. 在数组中使用对象来代替三元表达式，提高代码的可读性，如果flag为true，则active生效 -->
<h1 :class="['red', 'italic', { 'active': flag }]">逗比笔记</h1>
<!--
4. 直接使用对象，在为class使用v-bind绑定对象的时候，对象的属性是类名，
由于对象的属性可带引号，也可不带引号，所以这里我没写引号，属性的值是一个标识符
-->
<h1 :class="{ red: true, italic: false, active: false }">逗比笔记</h1>
<!-- :class可以直接使用对象，那么对象也可以在vue对象中定义 -->
<h1 :class="classObj">逗比笔记</h1>
</div>
</template>
<!-- 脚本 -->
<script lang="ts" setup>
import { ref } from 'vue';
let flag = ref(true);
let classObj = ref({ red: true, italic: false, active: false });
</script>
<style scoped>
.red {
color: red;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
# 11.2 style内联样式
除了可以使用原始的 style 设置的方式，Vue 中还可以有三种使用 style 的方式。
举个栗子：
<!-- 结构 -->
<template>
<div id="root">
<!-- 0. 使用原始的设置方式 -->
<h1 style="color:red; font-size:40px">逗比笔记</h1>
<!-- 1. 直接在元素上通过:style的形式，书写样式对象，如果key包含-，则key必须是字符串形式 -->
<h1 :style="{color: 'red', 'font-size': '40px'}">逗比笔记</h1>
<!-- 2. 将样式对象，定义到Vue对象的data中，并直接引用到:style中 -->
<h1 :style="styleObj1">逗比笔记</h1>
<!-- 3. 在:style中通过数组，引用多个Vue中的data上的样式对象 -->
<h1 :style="[styleObj1, styleObj2]">逗比笔记</h1>
</div>
</template>
<!-- 脚本 -->
<script lang="ts" setup>
import { ref } from 'vue';
let styleObj1 = ref({ color: 'red', 'font-weight': 200 });
let styleObj2 = ref({ 'font-style': 'italic' });
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
上面使用的 styleObj1 和 styleObj2 需要再 Vue 对象中的 data 中进行定义。