Vue 的 Class 與 Style 綁定

Eidesen 發(fā)布于2019-08-20 19:06 / 1424人閱讀

摘要：當(dāng)我們在控制臺修改的屬性為時，會給添加一個藍(lán)色的背景顏色。我們也可以傳入更多的屬性來切換多個。和上一篇的模板語法和計算屬性下一篇的條件渲染和列表渲染

Class 與 Style 綁定

上一篇：Vue 的模板語法和計算屬性：https://segmentfault.com/a/11...
下一篇：Vue 的條件渲染和列表渲染：https://segmentfault.com/a/11...

綁定 HTML Class 對象語法

我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：

如上，我們先給 .exp 一個邊框，我們利用 v-bind 方法傳入一個新的 class 屬性 .newExp，設(shè)置一個藍(lán)色的背景顏色。當(dāng)我們在控制臺修改 .newExp 的屬性為 true 時，會給 div 添加一個藍(lán)色的背景顏色。

我們也可以傳入更多的屬性來切換多個 class 。

在模板里的渲染結(jié)果為：

我們也可以使用對象的方法來切換屬性

渲染結(jié)果和上面的一樣

數(shù)組語法

我們可以把一個數(shù)組傳給 v-bind:class，以應(yīng)用一個 class 列表：

渲染為：

要切換class，使用三元運算符：

使用對象語法的話，會看起來更加清晰

數(shù)組語法

v-bind:style 的數(shù)組語法可以將多個樣式對象應(yīng)用到一個元素上：

自動添加前綴

當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時，如 transform，Vue.js 會自動偵測并添加相應(yīng)的前綴。

Chrome 和 Safari : -webkit-
IE :               -ms-
Firfox :           -moz-
Opera :            -o-

To be continue......

上一篇：Vue的模板語法和計算屬性：https://segmentfault.com/a/11...
下一篇：Vue 的條件渲染和列表渲染：https://segmentfault.com/a/11...

GPU云服務(wù)器云服務(wù)器綁定Style樣式綁定class vue綁定空間與域名的綁定

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85152.html

相關(guān)文章

Vue.js-計算屬性和class與style綁定

摘要：每一個計算屬性都包含一個和一個。使用計算屬性的原因在于它的依賴緩存。及與綁定的主要用法是動態(tài)更新元素上的屬性。測試文字當(dāng)?shù)谋磉_(dá)式過長或邏輯復(fù)雜時，還可以綁定一個計算屬性。學(xué)習(xí)筆記：前端開發(fā)文檔計算屬性所有的計算屬性都以函數(shù)的形式寫在Vue實例中的computed選項內(nèi)，最終返回計算后的結(jié)果。計算屬性的用法在一個計算屬性中可以完成各種復(fù)雜的邏輯，包括運算、函數(shù)調(diào)用等，只要最終...

Shihira 2019-08-23 16:02 評論0 收藏0
004-讀書筆記-Vue官網(wǎng) Class與Style的綁定

摘要：綁定綁定，使用，簡寫的形式是。綁定比較靈活，可以使用表達(dá)式字符串對象或數(shù)組。綁定字符串綁定字符串的時候只能綁定一個，不能綁定多個。 1.綁定Class 綁定Class，使用 v-bind:class，簡寫的形式是 :class。綁定Class比較靈活，可以使用表達(dá)式、字符串、對象或數(shù)組。 1-1 搭建結(jié)構(gòu) 首先，新建一些 class 樣式： .colorRed { colo...

hufeng 2019-08-21 17:16 評論0 收藏0
Vue中 Class 與 Style 綁定

摘要：與綁定數(shù)據(jù)綁定一個常見需求是操作元素的列表和它的內(nèi)聯(lián)樣式。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對象或數(shù)組。綁定對象語法我們可以傳給一個對象，以動態(tài)地切換上面的語法表示的更新將取決于數(shù)據(jù)屬性是否為真值。 Class 與 Style 綁定數(shù)據(jù)綁定一個常見需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因為它們都是屬性。因此，在 v-bind 用于 class 和 style 時，...

lemanli 2019-08-20 19:05 評論0 收藏0
Vue.js如何綁定class和style（內(nèi)聯(lián)樣式）

摘要：我們還可以綁定返回對象的計算屬性。用在組件上輸出這同樣適用于綁定輸出綁定內(nèi)聯(lián)樣式對象語法的對象語法十分直觀看著非常像，其實它是一個對象。 vue的class和style綁定綁定html class 對象語法我們可以傳給 v-bind:class 一個對象，以動態(tài)地切換 class：上面的語法表示 class active 的更新將取決于數(shù)據(jù)屬性 isActive 是否為真值。...

Chaz 2019-08-20 19:05 評論0 收藏0
React-JSX實現(xiàn)Class與 Style 動態(tài)綁定

摘要：錯誤例子可以實現(xiàn)的語法如下使用邏輯運算符文件文件使用三元運算符文件使用函數(shù)綁定的數(shù)據(jù)對象也不必內(nèi)聯(lián)定義在模板里可以定義一個函數(shù)，類似中的鉤子函數(shù)。作者：羽徵摘要：操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個常見需求，頻繁操作dom元素會降低javascript性能，為了實現(xiàn)高性能js，動態(tài)綁定class和style是高素養(yǎng)程序員的必選。本文以React-JSX語法為基礎(chǔ)，...

phodal 2019-08-23 10:48 評論0 收藏0