Vue 中使用 CSS 非常靈活，可通過(guò) class 和 style 給元素動(dòng)態(tài)綁定 CSS，今天內(nèi)容詳細(xì)介紹使用規(guī)則：

在未使用 Vue 框架時(shí)，可以通過(guò) class 和 style 來(lái)給 HTML 元素添加 css，如果想動(dòng)態(tài)修改 css 可直接操作 DOM 元素的屬性。在前端小課 第6天：使用CSS的三種方式?中我們講了 css 的引入方式。

如果想動(dòng)態(tài)修改 css 樣式，多多少少有一些不便，vue 解決了這個(gè)問題。

class

在 Vue 模板中可以直接添加 class 屬性，而且支持多種方式，比如對(duì)象、數(shù)組、JS表達(dá)式，這些說(shuō)白了就是為了能夠更靈活修改 class。

如果 css 在代碼中不會(huì)涉及到修改，直接使用靜態(tài)的 class 就行：

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

如果，某些 css 會(huì)根據(jù)不同的業(yè)務(wù)發(fā)生變化，這時(shí)就需要進(jìn)行動(dòng)態(tài)綁定 class，vue 中提供了多種方法：

1、模板中寫對(duì)象

這種語(yǔ)法規(guī)則類似在 js 中定義一個(gè)對(duì)象，如果 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 的值，樣式便可以動(dòng)態(tài)修改。

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

2、js 中寫對(duì)象

你可以把動(dòng)態(tài) class 的邏輯直接寫到 JS 代碼中，這種寫法可以減輕模板中定義太多的業(yè)務(wù)邏輯。

<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、使用數(shù)組

以上兩種方式可以通過(guò)數(shù)組設(shè)置多個(gè) class，語(yǔ)法和 js 中的數(shù)組定義一致。

<div?:class="[contentObj,?{stress:?isStress}]">本文來(lái)自公眾號(hào)素燕div>
.content?{
????color:?#000;
????font-size:?17px;
????margin:?10px;
}
.stress?{
????color:?red;
}
data()?{
????return?{
????????isStress:?true,
????????contentObj:?{
????????????content:?true
????????}
????}
}

4、使用三元表達(dá)式

<div?:class="[isStress???stress?:?'']">本文來(lái)自公眾號(hào)素燕div>
.stress?{
????color:?red;
}
data()?{
????return?{
????????isStress:?true
????}
}

style

vue 也可以通過(guò) style 給 HTML 元素設(shè)置屬性。用法和 class 用法一致。如果希望通過(guò) style 的方式給 HTML 元素設(shè)置 css，可以通過(guò) :style 來(lái)動(dòng)態(tài)給 HTML 動(dòng)態(tài)綁定 css。

1、在模板中使用對(duì)象

模板中定的對(duì)象，給元素設(shè)置了字體顏色和字體大小，通過(guò)屬性值 activeColor 和 fontSize 動(dòng)態(tài)修改元素的字體顏色和大小。

<div?:style="{?color:?activeColor,?fontSize:?fontSize?+?'px'?}">div>
data()?{
??return?{
????activeColor:?'blue',
????fontSize:?20
??}
}

2、在 js 中定義對(duì)象

把設(shè)置樣式的對(duì)象直接定義到 js 中而非模板中。

<div?:style="contentStyle">div>
data()?{
??return?{
????contentStyle:?{
????????color:?'blue',
????????fontSize:?20
????}
??}
}

3、使用數(shù)組

把設(shè)置樣式的對(duì)象直接定義到 js 中而非模板中。

<div?:style="[contentStyle,?{fontSize:?fs?+?'px'}]">div>
data()?{
??return?{
??????fs:?20,
??????contentStyle:?{
????????color:?'blue'
??????}
??}
}今天的內(nèi)容比較簡(jiǎn)單，基本都是語(yǔ)法規(guī)則，大家加油！

長(zhǎng)按關(guān)注

素燕《前端小課》

幫助 10W 人入門并進(jìn)階前端

官網(wǎng)：https://lefex.gitee.io/

總結(jié)

以上是生活随笔為你收集整理的class根据状态 vue_系统学习 vue 中使用 css 的各种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。