第一种: 对象
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{color:(index===0?worldColor:'#000')}"></div>
第二种: 数组
<div :style="[listStyle, otherStyles]"></div>
<div :style="[{color:(index===0?worldColor:'#eee')},{fontSize:'10px'}]"></div>
第三种: 三目表达式
<div :style="{color:(index===0?worldColor:'#eee')}"></div>
<div :style="[{color:(index===0?worldColor:'#eee')},{fontSize:'10px'}]"></div>
第四种:绑定data对象
<div :style="styleObject"></div>
data() {
return{
styleObject: {
color: 'pink',
fontSize: '10px'
}
}
}
多重值(浏览器会根据运行支持情况进行选择)
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>