Class 與 Style 綁定

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

綁定 HTML class

綁定對象?

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

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

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

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

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

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

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

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

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

綁定數(shù)組?

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

其渲染結(jié)果為

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

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

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

渲染結(jié)果如下

在組件上使用

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

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

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

渲染出的 HTML 為：

Class 的綁定也是同樣的：

渲染結(jié)果為

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

這將被渲染為：

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

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

綁定對象?

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

將被渲染為

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

直接綁定一個樣式對象通常是一個好主意，這樣可以使模板更加簡潔：

渲染結(jié)果一樣

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

綁定數(shù)組?

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

渲染結(jié)果為

自動前綴?

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

樣式多值?

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

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

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

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

最新評論