Vue中如何使用CSS

这篇文章将为大家详细讲解有关Vue中如何使用CSS，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、class

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

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

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

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

1. 模板中写对象

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

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

需要定义 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 代码中，这种写法可以减轻模板中定义太多的业务逻辑。

<h2 class="title" :class="textMode">{{title}}</h2>

.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'       }   } }

关于“Vue中如何使用CSS”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。