Vue基礎(chǔ)-動態(tài)樣式

一、作用

使用聲明式變量來控制class、style的值

二、語法

1. :class

:class='由css類名拼接而成的字符串';

:class='[表達(dá)式1, 表達(dá)式2, ...]'? 注:每一個表達(dá)式都要求返回一個已經(jīng)定義過的css類

:class='{"CSS類名1":布爾值, "CSS類名2":布爾值, ...}'

注:對象語法中key名的返回是有效的css類名,value必須是布爾值(小心布爾值的隱式類型轉(zhuǎn)換)。

2. :style

:style='ss'

注: ss可以html5中style值的字符串,可以[{},{}],還可以直接是 {css屬性名:css屬性值}

:style='[{},{}, ...]'

注:數(shù)組中的每個對象都是“css屬性:css屬性值”構(gòu)成的對象。

:style='{css屬性:css屬性值, ...}'

三、常見的坑

盡可能不要把動態(tài)class和靜態(tài)class一起使用,原因是動態(tài)class起作用的時間偏慢一些

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容