Class 與 Style 綁定

數(shù)據(jù)綁定的一個(gè)常見需求場(chǎng)景是操縱元素的 CSS class 列表和內(nèi)聯(lián)樣式。因?yàn)?class 和 style 都是 attribute，我們可以和其他 attribute 一樣使用 v-bind 將它們和動(dòng)態(tài)的字符串綁定。但是，在處理比較復(fù)雜的綁定時(shí)，通過拼接生成字符串是麻煩且易出錯(cuò)的。因此，Vue 專門為 class 和 style 的 v-bind 用法提供了特殊的功能增強(qiáng)。除了字符串外，表達(dá)式的值也可以是對(duì)象或數(shù)組。

綁定 HTML class

綁定對(duì)象?

我們可以給 :class (v-bind:class 的縮寫) 傳遞一個(gè)對(duì)象來動(dòng)態(tài)切換 class：

上面的語法表示 active 是否存在取決于數(shù)據(jù)屬性 isActive 的真假值。

你可以在對(duì)象中寫多個(gè)字段來操作多個(gè) class。此外，:class 指令也可以和一般的 class attribute 共存。舉例來說，下面這樣的狀態(tài)：

渲染的結(jié)果會(huì)是：

當(dāng) isActive 或者 hasError 改變時(shí)，class 列表會(huì)隨之更新。舉例來說，如果 hasError 變?yōu)?true，class 列表也會(huì)變成 “static active text-danger”。

綁定的對(duì)象并不一定需要寫成內(nèi)聯(lián)字面量的形式，也可以直接綁定一個(gè)對(duì)象：

最終渲染,和內(nèi)聯(lián)對(duì)象沒差別

我們也可以綁定一個(gè)返回對(duì)象的計(jì)算屬性。這是一個(gè)常見且很有用的技巧：

渲染結(jié)果也別無二致

綁定數(shù)組?

我們可以給 :class 綁定一個(gè)數(shù)組來渲染多個(gè) CSS class：

其渲染結(jié)果為

如果你也想在數(shù)組中有條件地渲染某個(gè) class，你可以使用三元表達(dá)式：

errorClass 會(huì)一直存在，但 activeClass 只會(huì)在 isActive 為真時(shí)才存在。

然而，這可能在有多個(gè)依賴條件的 class 時(shí)會(huì)有些冗長(zhǎng)。因此也可以在數(shù)組中嵌套對(duì)象：

渲染結(jié)果如下

在組件上使用

對(duì)于只有一個(gè)根元素的組件，當(dāng)你使用了 class attribute 時(shí)，這些 class 會(huì)被添加到根元素上并與該元素上已有的 class 合并。

舉例來說，如果你聲明了一個(gè)組件名叫 helloWorld，模板如下：

在使用時(shí)添加一些 class：

渲染出的 HTML 為：

Class 的綁定也是同樣的：

渲染結(jié)果為

如果你的組件有多個(gè)根元素，你將需要指定哪個(gè)根元素來接收這個(gè) class。你可以通過組件的 $attrs 屬性來指定接收的元素：

這將被渲染為：

你可以在另一篇文章vue3 透?jìng)?Attribute 一章中了解更多組件的 attribute 繼承的細(xì)節(jié)。

綁定內(nèi)聯(lián)樣式

綁定對(duì)象?

:style 支持綁定 JavaScript 對(duì)象值，對(duì)應(yīng)的是 HTML 元素的 style 屬性：

將被渲染為

盡管推薦使用 camelCase，但 :style 也支持 kebab-cased 形式的 CSS 屬性 key (對(duì)應(yīng)其 CSS 中的實(shí)際名稱)，例如：

直接綁定一個(gè)樣式對(duì)象通常是一個(gè)好主意，這樣可以使模板更加簡(jiǎn)潔：

渲染結(jié)果一樣

同樣的，如果樣式對(duì)象需要更復(fù)雜的邏輯，也可以使用返回樣式對(duì)象的計(jì)算屬性。這里就不再作演示了

綁定數(shù)組?

我們還可以給 :style 綁定一個(gè)包含多個(gè)樣式對(duì)象的數(shù)組。這些對(duì)象會(huì)被合并后渲染到同一元素上：

渲染結(jié)果為

自動(dòng)前綴?

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

樣式多值?

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

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

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

到此這篇關(guān)于vue3 Class 與 Style 綁定操作方法的文章就介紹到這了,更多相關(guān)vue3 Class 與 Style 綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論