第一種： 對(duì)象
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{color:(index===0?worldColor:'#000')}"></div>
第二種： 數(shù)組
<div :style="[listStyle, otherStyles]"></div>
<div :style="[{color:(index===0?worldColor:'#eee')},{fontSize:'10px'}]"></div>
第三種： 三目表達(dá)式
<div :style="{color:(index===0?worldColor:'#eee')}"></div>
<div :style="[{color:(index===0?worldColor:'#eee')},{fontSize:'10px'}]"></div>
第四種：綁定data對(duì)象
<div :style="styleObject"></div>
data() {
return{
styleObject: {
color: 'pink',
fontSize: '10px'
}
}
}
多重值(瀏覽器會(huì)根據(jù)運(yùn)行支持情況進(jìn)行選擇)
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
