??在開發(fā)項目時，可能會需要動態(tài)添加 style 行內(nèi)樣式，那如何動態(tài)地添加style樣式呢？下面就說說幾種方法：
- 對象形式
:style="{ fontSize: fontSize + 'px' }"
:style="{color:( number==0?fontColor:'#000')}"
- 數(shù)組形式
:style="[baseStyles, otherStyles]"
:style="[{color:(number==0?fontColor:'#000')},{fontSize:'25px'}]"
- 三目(元)運算符形式
:style="{color:(number==0?fontColor:'#000')}"
:style="[{color:(number==0?fontColor:'#000')}]"
- 多重值形式(根據(jù)瀏覽器內(nèi)核情況進行選擇)
:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"
- 綁定data對象形式
:style="needStyle"
data() {
return{
needStyle: {
color: 'blue',
fontSize: '16px'
}
}
}
注意：
??1. 凡是css中有 - 的style屬性名都要變成駝峰式，比如font-size要變成fontSize、background-color要變成backgroundColor。
??2. 除了綁定值，其他的屬性名的值要用引號括起來，比如backgroundColor: '#00a2ff'，而不是 backgroundColor: #00a2ff。
