一、場(chǎng)景

? ? ? ?在工作中遇到，本身div是有固定class類名來(lái)寫(xiě)樣式，但是當(dāng)特殊情況下，div的高度可能會(huì)隨著頁(yè)面?zhèn)鲄⒌牟煌l(fā)生改變，這時(shí)候需要再增加一個(gè)動(dòng)態(tài)類名來(lái)改變樣式。查了下網(wǎng)上關(guān)于這方面的文章甚少，今天就具體分析一下。

二、操作

1. :class數(shù)組寫(xiě)法

? ? 如代碼所示，:class可以是數(shù)組格式，這時(shí)候原本固定的標(biāo)簽'fixedName'為數(shù)組的一個(gè)值，另外一個(gè)值'changeName'是由changeData這個(gè)值true或false來(lái)決定的。

<div :class="['fixedName', [!changeData? 'changeName': '']]"></div>

2. :class對(duì)象寫(xiě)法

? ? ? 如代碼所示，:class也可以是對(duì)象格式，這時(shí)候定義'fixedName'這個(gè)值為true，'changeName'值由changeData的true或false來(lái)決定。

<div :class="{' fixedName': true, ' changeName ': ! changeData }"></div>