class與style都是屬性，所以可以用 v-bind (:)處理，只需要通過表達式字符串即可。
.active{
color:blue;
}
.fontSize{
font-size: 20px;
}
const vm = new Vue({
el:'#app',
data:{
isactive:true,
activeClass:'active',//數據activeClass使用active樣式
fontSize:'26',
fontSizeClass: 'fontSize',//數據fontSizeClass使用fontSize樣式
activeColor:{'color':'red', 'background':'blue'},//數據寫入樣式
}
});
一、綁定style
1、:style = "{'屬性名稱':數據}"
<div :style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">world</div>
2、:style = 數據
<div :style="activeColor">world11</div>
二、綁定class
1、:class="數據"
<div :class="fontSizeClass">hello</div>
2、:class="{'樣式':是否顯示}"
<div :class="{'active':isactive}">大家好</div>
3、
-
:class="['數據',‘數據‘]"可以是數組 -
:class="['樣式',‘樣式‘]"可以是數組
<div :class="['active',fontSizeClass]">樣式</div>
總結
<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>
