Style綁定

字符串

由于v-bind指令認(rèn)為雙引號(hào)中的內(nèi)容是JavaScript表達(dá)式，所以需要再使用一對(duì)單引號(hào)表示字符串。

動(dòng)態(tài)增刪改Style——手動(dòng)處理字符串（拼接、截取）實(shí)現(xiàn)。

（1）字符串字面量

（2）值為字符串的組件屬性

（3）返回字符串的計(jì)算屬性

（4）其它值為字符串的JS表達(dá)式

字符串拼接（字面量）

字符串拼接（字面量+組件屬性）

三元表達(dá)式（字面量）

三元表達(dá)式（字面量+組件屬性）

……

JS對(duì)象

注意所用對(duì)象為鍵值對(duì)格式，value為字符串類型。key含有連字符時(shí)（kebab-cased）必須放在單引號(hào)中，或者使用小駝峰格式（camelCase）。

動(dòng)態(tài)增刪Style——增刪key-value實(shí)現(xiàn)，動(dòng)態(tài)修改Style——修改value實(shí)現(xiàn)。

（1）JS對(duì)象字面量

（2）指向JS對(duì)象的組件屬性

舉一反三

對(duì)象的value也可以是字符串類型的組件屬性或計(jì)算屬性。

如下做法不可行，請(qǐng)使用“（3）返回JS對(duì)象的計(jì)算屬性”。

此外，無(wú)法使用含連字符的組件屬性。

（3）返回JS對(duì)象的計(jì)算屬性

JS數(shù)組

數(shù)組成員為如上提到的可用在:style的東西，可以混用，甚至可以數(shù)組套數(shù)組。

（1）JS數(shù)組字面量

（2）指向JS數(shù)組的組件屬性

拓展知識(shí)

自動(dòng)前綴

當(dāng)你在?:style?中使用了需要瀏覽器特殊前綴的 CSS 屬性時(shí)，Vue 會(huì)自動(dòng)為他們加上相應(yīng)的前綴。Vue 是在運(yùn)行時(shí)檢查該屬性是否支持在當(dāng)前瀏覽器中使用。如果瀏覽器不支持某個(gè)屬性，那么將測(cè)試加上各個(gè)瀏覽器特殊前綴，以找到哪一個(gè)是被支持的。

樣式多值

你可以對(duì)一個(gè)樣式屬性提供多個(gè) (不同前綴的) 值，舉例來(lái)說(shuō)：

數(shù)組僅會(huì)渲染瀏覽器支持的最后一個(gè)值。在這個(gè)示例中，在支持不需要特別前綴的瀏覽器中都會(huì)渲染為?display: flex。

Class綁定

HTML標(biāo)椎語(yǔ)法，為div添加一個(gè)名為“border”的Class。

同時(shí)使用了HTML標(biāo)椎語(yǔ)法與Attribute綁定語(yǔ)法，兩者可以共存。

字符串

由于v-bind指令認(rèn)為雙引號(hào)中的內(nèi)容是JavaScript表達(dá)式，所以需要再使用一對(duì)單引號(hào)表示字符串。

動(dòng)態(tài)增刪Class——手動(dòng)處理字符串（拼接、截?。?shí)現(xiàn)。

（1）字符串字面量

（2）值為字符串的組件屬性

（3）返回字符串的計(jì)算屬性

（4）其它值為字符串的JS表達(dá)式

字符串拼接（字面量）

字符串拼接（字面量+組件屬性）

三元表達(dá)式（字面量）

三元表達(dá)式（字面量+組件屬性）

……

JS對(duì)象

注意所用對(duì)象為鍵值對(duì)格式，value為Boolean類型。key含有連字符時(shí)必須放在單引號(hào)中。

動(dòng)態(tài)增刪Class——修改value實(shí)現(xiàn)。

（1）JS對(duì)象字面量

（2）指向JS對(duì)象的組件屬性

舉一反三

對(duì)象的value也可以是Boolean類型的組件屬性或計(jì)算屬性。

如下做法不可行。

此外，無(wú)法使用含連字符的組件屬性。

（3）返回JS對(duì)象的計(jì)算屬性

JS數(shù)組

數(shù)組成員為如上提到的可用在:class的東西，可以混用。甚至可以數(shù)組套數(shù)組。

（1）JS數(shù)組字面量

（2）指向JS數(shù)組的組件屬性