二、綁定 HTML Class

對象語法

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

      上面的語法表示 active 這個(gè) class 存在與否將取決于數(shù)據(jù)屬性 isActive 的 truthiness

你可以在對象中傳入更多屬性來動態(tài)切換多個(gè) class。此外，v-bind:class 指令也可以與普通的 class 屬性共存。當(dāng)有如下模板:

  和如下 data

data: {
 isActive: true,
 hasError: false
}

       結(jié)果渲染為：

    當(dāng) isActive 或者 hasError 變化時(shí)，class 列表將相應(yīng)地更新。例如，如果 hasError 的值為 true，class 列表將變?yōu)?"static active text-danger"

      綁定的數(shù)據(jù)對象不必內(nèi)聯(lián)定義在模板里

data: {
 classObject: {
 active: true,
 'text-danger': false
 }
}

       渲染的結(jié)果和上面一樣。我們也可以在這里綁定一個(gè)返回對象的計(jì)算屬性。這是一個(gè)常用且強(qiáng)大的模式：

data: {
 isActive: true,
 error: null
},
computed: {
 classObject: function () {
 return {
  active: this.isActive && !this.error,
  'text-danger': this.error && this.error.type === 'fatal'
 }
 }
}

數(shù)組語法

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

data: {
 activeClass: 'active',
 errorClass: 'text-danger'
}

   渲染為：

     如果你也想根據(jù)條件切換列表中的 class，可以用三元表達(dá)式

    這樣寫將始終添加 errorClass，但是只有在 isActive 是 truthy 時(shí)才添加 activeClass。

     不過，當(dāng)有多個(gè)條件 class 時(shí)這樣寫有些繁瑣。所以在數(shù)組語法中也可以使用對象語法

三、用在組件上

        當(dāng)在一個(gè)自定義組件上使用 class 屬性時(shí)，這些類將被添加到該組件的根元素上面。這個(gè)元素上已經(jīng)存在的類不會被覆蓋。

       例如，如果你聲明了這個(gè)組件：

Vue.component('my-component', {
 template: 'Hi
'
})

     然后在使用它的時(shí)候添加一些 class

     HTML 將被渲染為:

Hi

     對于帶數(shù)據(jù)綁定 class 也同樣適用 

   當(dāng) isActive 為 truthy時(shí)，HTML 將被渲染成為

Hi

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

 對象語法

  v-bind:style 的對象語法十分直觀——看著非常像 CSS，但其實(shí)是一個(gè) JavaScript 對象。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用單引號括起來) 來命名：

data: {
 activeColor: 'red',
 fontSize: 30
}

     直接綁定到一個(gè)樣式對象通常更好，這會讓模板更清晰

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

   同樣的，對象語法常常結(jié)合返回對象的計(jì)算屬性使用

    數(shù)組語法

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。