Vue 中使用 CSS 非常靈活，可通過 class 和 style 給元素動態綁定 CSS，今天內容詳細介紹使用規則：

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

如果想動態修改 css 樣式，多多少少有一些不便，vue 解決了這個問題。

[[360396]]

一、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' 
      } 
  } 
} 

今天的內容比較簡單，基本都是語法規則，大家加油!