在實際開發(fā)中經(jīng)常會遇到動態(tài)操作元素樣式的需求。因此,vue 允許開發(fā)者通過 v-bind 屬性綁定指令,為元素動態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。
可以通過三元表達式,動態(tài)的為元素綁定 class 的類名。示例代碼如下:
MyDeep組件
data()?{??return?{?isItalic:?true?}}.thin{?//?字體變細??font-weight:200;}.italic{?//?傾斜字體??font-style:?italic;}
如果元素需要動態(tài)綁定多個 class 的類名,此時可以使用數(shù)組的語法格式:
??MyDeep?組件
data(){??return?{????isItalic:?true,????isDelete:?false,??}}
使用數(shù)組語法動態(tài)綁定 class 會導致模板結(jié)構(gòu)臃腫的問題。此時可以使用對象語法進行簡化:
MyDeep?組件
data(){??return?{????classobj:{?//對象中,屬性名是class?類名,值是布爾值??????italic:?true,??????delete:?false,????}???}}
4. 以對象語法綁定內(nèi)聯(lián)的 style
:style 的對象語法十分直觀——看著非常像 CSS,但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用引號括起來) 來命名:
黑馬程序員data()?{??return?{????active:?'red',????fsize:?30,????bgcolor:'pink',??}}
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號 ISP經(jīng)營許可證:豫B-20160281