[TOC] #### 1. v-bind 綁定 class 屬性對(duì)象語(yǔ)法 --- 對(duì)象語(yǔ)法的含義是 **:class** 后面跟的是一個(gè)對(duì)象，語(yǔ)法格式: ```html <span :class="{類(lèi)名: 布爾值}"></span> ``` 使用示例: 當(dāng)布爾值為 true 時(shí)才顯示該類(lèi)名 :class 屬性是一個(gè)對(duì)象，對(duì)象中的鍵值可以是布爾值，也可以是 vue 示例中的 data 數(shù)據(jù)名稱(chēng) ```html <span :class="{actived: isShow}"></span> <span :class="{active: true, image: false}"></span> ``` 當(dāng)和普通的類(lèi)同時(shí)存在時(shí)，不會(huì)沖突，會(huì)自動(dòng)進(jìn)行合并, 下面 class 屬性結(jié)果為: **class="online active"** ```html <span class="online" :class="{active: true, image: false}"></span> ``` 如果過(guò)于復(fù)雜，可以對(duì)象放在 computed、methods 中 (數(shù)組語(yǔ)法也可以放) ```html <span :class="attr">computed 計(jì)算屬性</span> <span :class="action()">methods 方法</span> ``` #### 2. v-bind 綁定 class 屬性數(shù)組語(yǔ)法 --- 數(shù)組語(yǔ)法的含義是 **:class** 后面跟的是一個(gè)數(shù)組，語(yǔ)法格式: ```html <div :class="['active', 'image']"></div> ``` 當(dāng)數(shù)組中的值可以是字符串，也可以是 vue 實(shí)例中的 data 數(shù)據(jù) ```html <div :class="[color, fontSize]"></div> ``` #### 3. `:class` 屬性值使用 methods 方法 --- 很多場(chǎng)景下，我們需要根據(jù)邏輯判斷需要使用哪些 class 值，代碼可能會(huì)比較多，這些判斷寫(xiě)在模板中則不易維護(hù)，此時(shí)可以將這些邏輯定義在 methods 中，:class 值綁定為 methods 中的方法 ```html <block v-for="(item, index) in data" :key="index"> <view :class="itemClass(index)">{{ item }}</view> </block> ``` JS 中的方法 ```javascript { methods: { itemClass(index) { const value = ['item', `item-${index}`] value.push(index % 2 == 0 ? 'border1' : 'border2') // 其他邏輯處理 return value } } } ``` #### 4. v-bind 綁定 style 屬性對(duì)象語(yǔ)法 --- 對(duì)象語(yǔ)法的含義是 **:style** 后面跟的是一個(gè)對(duì)象，語(yǔ)法格式: ```html <span :style="{css屬性名: 屬性值}"></span> ``` 基礎(chǔ)使用 (30px 必須加引號(hào)，否則會(huì)被當(dāng)成變量解析) ```html <div :style="{fontSize: '30px', color: 'red'}">{{message}}</div> ``` :style 值也可以是 vue 實(shí)例中的 data 數(shù)據(jù) (css 是一個(gè)對(duì)象) ```html <div :style="css">{{message}}</div> ``` #### 5. v-bind 綁定 style 屬性數(shù)組語(yǔ)法 --- **:style** 數(shù)組語(yǔ)法就是后面跟一個(gè)數(shù)組，數(shù)組元素是對(duì)象，語(yǔ)法格式: 使用示例: (css1, css2 時(shí) vue 示例中 data 數(shù)據(jù)對(duì)象) ```html <div :style="[css1, css2]">{{message}}</div> ```