Vue.js class

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

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

class 屬性綁定

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

實(shí)例 1

實(shí)例中將 isActive 設(shè)置為 true 顯示了一個(gè)綠色的 div 塊，如果設(shè)置為 false 則不顯示：

<div v-bind:class="{ 'active': isActive }"></div>

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

<div class="active"></div>

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

實(shí)例 2

text-danger 類背景顏色覆蓋了 active 類的背景色：

<div class="static"
     v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

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

<div class="static active text-danger"></div>

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

實(shí)例 3

text-danger 類背景顏色覆蓋了 active 類的背景色：

<div id="app">
  <div v-bind:class="classObject"></div>
</div>

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

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

實(shí)例 4

new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,
        'text-danger': this.error.value && this.error.type === 'fatal',
      }
    }
  }
})

數(shù)組語法

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

實(shí)例 5

<div v-bind:class="[activeClass, errorClass]"></div>

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

<div class="active text-danger"></div>

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

實(shí)例 6

errorClass 是始終存在的，isActive 為 true 時(shí)添加 activeClass 類：

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>

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

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

實(shí)例 7

<div id="app">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鳥教程</div>
</div>

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

<div style="color: green; font-size: 30px;">菜鳥教程</div>

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

實(shí)例 8

<div id="app">
  <div v-bind:style="styleObject">菜鳥教程</div>
</div>

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

實(shí)例 9

<div id="app">
  <div v-bind:style="[baseStyles, overridingStyles]">菜鳥教程</div>
</div>

注意：當(dāng) v-bind:style 使用需要特定前綴的 CSS 屬性時(shí)，如 transform ，Vue.js 會(huì)自動(dòng)偵測并添加相應(yīng)的前綴。通過上述介紹，相信大家對Vue樣式綁定已經(jīng)有所了解，大家如果想了解更多相關(guān)知識(shí)，可以關(guān)注一下動(dòng)力節(jié)點(diǎn)的Vue js視頻教程，里面的課程內(nèi)容更加詳細(xì)豐富，希望對大家的學(xué)習(xí)能夠有所幫助。