Vue中如何使用CSS

《前端小課》

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

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

這種語法規(guī)則類似在 js 中定義一個(gè)對(duì)象，如果 isDark 為真，將給 h2 元素綁定 dark-text，否則綁定 light-text。

{{title}}

需要定義 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ù)邏輯。

{{title}}

.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ù)組

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

本文來自公眾號(hào)素燕