class與style都是屬性儒洛，所以可以用 v-bind (:)處理蔚携，只需要通過表達(dá)式字符串即可希太。
.active{
color:blue;
}
.fontSize{
font-size: 20px;
}
const vm = new Vue({
el:'#app',
data:{
isactive:true,
activeClass:'active',//數(shù)據(jù)activeClass使用active樣式
fontSize:'26',
fontSizeClass: 'fontSize',//數(shù)據(jù)fontSizeClass使用fontSize樣式
activeColor:{'color':'red', 'background':'blue'},//數(shù)據(jù)寫入樣式
}
});
一、綁定style
1酝蜒、:style = "{'屬性名稱':數(shù)據(jù)}"
<div :style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">world</div>
2誊辉、:style = 數(shù)據(jù)
<div :style="activeColor">world11</div>
二、綁定class
1亡脑、:class="數(shù)據(jù)"
<div :class="fontSizeClass">hello</div>
2堕澄、:class="{'樣式':是否顯示}"
<div :class="{'active':isactive}">大家好</div>
3、
-
:class="['數(shù)據(jù)',‘?dāng)?shù)據(jù)‘]"可以是數(shù)組 -
:class="['樣式',‘樣式‘]"可以是數(shù)組
<div :class="['active',fontSizeClass]">樣式</div>
總結(jié)
<div id="app">
<div :class="['active',fontSizeClass]">樣式</div>
<div :class="{'active':isactive}">大家好</div>
<div :class="fontSizeClass">hello</div>
<!-- style -->
<div :style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">world</div>
<div :style="activeColor">world11</div>
</div>
