Vue 中使用 CSS 非常灵活，可通过 class 和 style 给元素动态绑定 CSS，今天内容详细介绍使用规则：

在未使用 Vue 框架时，可以通过 class 和 style 来给 HTML 元素添加 css，如果想动态修改 css 可直接操作 DOM 元素的属性。在前端小课 第6天：使用CSS的三种方式 中我们讲了 css 的引入方式。

如果想动态修改 css 样式，多多少少有一些不便，vue 解决了这个问题。

class

在 Vue 模板中可以直接添加 class 属性，而且支持多种方式，比如对象、数组、JS表达式，这些说白了就是为了能够更灵活修改 class。

如果 css 在代码中不会涉及到修改，直接使用静态的 class 就行：

<div class="title">《前端小课》div>

如果，某些 css 会根据不同的业务发生变化，这时就需要进行动态绑定 class，vue 中提供了多种方法：

1、模板中写对象

这种语法规则类似在 js 中定义一个对象，如果 isDark 为真，将给 h1 元素绑定 dark-text，否则绑定 light-text。

<h1 class="title" :class="{'dark-text': isDark, 'light-text': !isDark}">{{title}}h1>

需要定义 css dark-text 和 light-text，只有这样才能够把样式渲染到 HTML 元素上。

.dark-text {    color: #fff;}.light-text {    color: #000;}

在 js 中定义属性 isDark，这样可以修改 isDark 的值，样式便可以动态修改。

data() {    return {        isDark: false,        title: '前端小课'    }}

2、js 中写对象

你可以把动态 class 的逻辑直接写到 JS 代码中，这种写法可以减轻模板中定义太多的业务逻辑。

<h1 class="title" :class="textMode">{{title}}h1>

.dark-text {    color: #fff;}.light-text {    color: #000;}

data() {    return {        colorMode: {            dark: false        },        textMode: {            'dark-text': false,            'light-text': true        },        title: '前端小课'    },    methods: {        changeMode() {            const isDark = this.colorMode.dark;            this.textMode['dark-text'] = isDark;            this.textMode['light-text'] = !isDark;        }    }},

3、使用数组

以上两种方式可以通过数组设置多个 class，语法和 js 中的数组定义一致。

<div :class="[contentObj, {stress: isStress}]">本文来自公众号素燕div>

.content {    color: #000;    font-size: 17px;    margin: 10px;}.stress {    color: red;}

data() {    return {        isStress: true,        contentObj: {            content: true        }    }}

4、使用三元表达式

<div :class="[isStress ? stress : '']">本文来自公众号素燕div>

.stress {    color: red;}

data() {    return {        isStress: true    }}

style

vue 也可以通过 style 给 HTML 元素设置属性。用法和 class 用法一致。如果希望通过 style 的方式给 HTML 元素设置 css，可以通过 :style 来动态给 HTML 动态绑定 css。

1、在模板中使用对象

模板中定的对象，给元素设置了字体颜色和字体大小，通过属性值 activeColor 和 fontSize 动态修改元素的字体颜色和大小。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">div>

data() {  return {    activeColor: 'blue',    fontSize: 20  }}

2、在 js 中定义对象

把设置样式的对象直接定义到 js 中而非模板中。

<div :style="contentStyle">div>

data() {  return {    contentStyle: {        color: 'blue',        fontSize: 20    }  }}

3、使用数组

把设置样式的对象直接定义到 js 中而非模板中。

<div :style="[contentStyle, {fontSize: fs + 'px'}]">div>

data() {  return {      fs: 20,      contentStyle: {        color: 'blue'      }  }}

今天的内容比较简单，基本都是语法规则，大家加油！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/