Vue.js class

class 與 style 是 HTML 元素的屬性，用于設(shè)置元素的樣式，我們可以用 v-bind 來(lái)設(shè)置樣式屬性。

Vue.js v-bind 在處理 class 和 style 時(shí)， 專門增強(qiáng)了它。表達(dá)式的結(jié)果類型除了字符串之外，還可以是對(duì)象或數(shù)組。

class 屬性綁定

我們可以為 v-bind:class 設(shè)置一個(gè)對(duì)象，從而動(dòng)態(tài)的切換 class:

以上實(shí)例 div class 為：

我們也可以在對(duì)象中傳入更多屬性用來(lái)動(dòng)態(tài)切換多個(gè) class 。

以上實(shí)例 div class 為：

我們也可以直接綁定數(shù)據(jù)里的一個(gè)對(duì)象：

實(shí)例 3 與 實(shí)例 2 的渲染結(jié)果是一樣的。

此外，我們也可以在這里綁定返回對(duì)象的計(jì)算屬性。這是一個(gè)常用且強(qiáng)大的模式：

數(shù)組語(yǔ)法

我們可以把一個(gè)數(shù)組傳給v-bind:class，實(shí)例如下：

以上實(shí)例 div class 為：

我們還可以使用三元表達(dá)式來(lái)切換列表中的 class ：

Vue.js style(內(nèi)聯(lián)樣式)

我們可以在v-bind:style直接設(shè)置樣式：

以上實(shí)例 div style 為：

也可以直接綁定到一個(gè)樣式對(duì)象，讓模板更清晰：

v-bind:style 可以使用數(shù)組將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：

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

內(nèi)容來(lái)自：runoob.com 菜鳥(niǎo)教程

整理：極動(dòng)云，寧波家電物聯(lián)網(wǎng)云平臺(tái)

CONTACT US: http://www.iot-jd.com