在實(shí)際開發(fā)中經(jīng)常會(huì)遇到動(dòng)態(tài)操作元素樣式的需求。因此，vue 允許開發(fā)者通過 v-bind 屬性綁定指令，為元素動(dòng)態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。

1. 動(dòng)態(tài)綁定 HTML 的 class

可以通過三元表達(dá)式，動(dòng)態(tài)的為元素綁定 class 的類名。示例代碼如下：

MyDeep組件Toggle?Italicdata()?{??return?{?isItalic:?true?}}.thin{?//?字體變細(xì)??font-weight:200;}.italic{?//?傾斜字體??font-style:?italic;}

2. 以數(shù)組語法綁定 HTML 的 class

如果元素需要?jiǎng)討B(tài)綁定多個(gè) class 的類名，此時(shí)可以使用數(shù)組的語法格式：

??MyDeep?組件Toggle?ItalicToggle?Deletedata(){??return?{????isItalic:?true,????isDelete:?false,??}}

3. 以對(duì)象語法綁定 HTML 的 class

使用數(shù)組語法動(dòng)態(tài)綁定 class 會(huì)導(dǎo)致模板結(jié)構(gòu)臃腫的問題。此時(shí)可以使用對(duì)象語法進(jìn)行簡(jiǎn)化：

MyDeep?組件Toggle?ItalicToggle?Deletedata(){??return?{????classobj：{?//對(duì)象中，屬性名是class?類名，值是布爾值??????italic:?true,??????delete:?false,????}???}}

4. 以對(duì)象語法綁定內(nèi)聯(lián)的 style

:style 的對(duì)象語法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對(duì)象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來) 來命名：

黑馬程序員