還有一個數(shù)據(jù)綁定就是控制元素的樣式表或內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩裕晕覀兛梢酝ㄟ^v-bind來處理：使用表達(dá)運(yùn)算得到一個最終的字符串。但是字符串拼接是容易混亂和出錯的。因?yàn)檫@個原因，Vue在使用v-bind綁定class和style時提供了增強(qiáng)方法。除了字符串，表達(dá)式同時也可能運(yùn)算得到對象和數(shù)組。

綁定 HTML Classes

對象語法

我們可以給:class（v-bind:class的縮寫）傳遞一個對象用來動態(tài)控制元素的樣式：

<div :class="{ active: isActive }"></div>

這段意思是這個div的樣式是否為active取決于布爾值isActive是否為真。你可以在元素上寫上多個字段來使用元素有多個樣式。另外:class可以與靜態(tài)的class同時存在。看下面的模板：

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

使用下面的數(shù)據(jù)：

data() {
  return {
    isActive: true,
    hasError: false
  }
}

最終可能渲染為：

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

isActive和hasError更新，元素的樣式也隨之更新。比如hasError變更為true，則最終渲染為：

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

對象綁定不能是內(nèi)聯(lián)樣式：

<div :class="classObject"></div>

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

渲染結(jié)果是一樣的。我們同時也可以綁定一個返回對象的計(jì)算屬性。這是比較常用且強(qiáng)大的方法：

<div :class="classObject"></div>

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

數(shù)組語法

我們可以傳遞一個數(shù)組給:class，這樣元素就可以有一個樣式列表：

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

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

渲染結(jié)果：

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

我們也可以根據(jù)條件控制樣式是否包含在樣式列表中，可以使用三元表達(dá)式：

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

errorClass始終存在，activeClass則取決于isActive是否為真。
但如果有多個條件判斷的話就會顯得有點(diǎn)繁瑣，這就是為什么要使用數(shù)組語法：

<div :class="[{ active: isActive }, errorClass]"></div>

組件樣式

這個章節(jié)假設(shè)你已經(jīng)了解組件了，如果有問題請先跳過，學(xué)習(xí)組件后來來學(xué)習(xí)。

如果你將class屬性應(yīng)用到只有一個根元素的定制組件上，樣式將被加到這個根元素上。根元素上的樣式將不會被覆蓋。
例如，你這樣聲明了一個組件：

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

使用時又添加了一個結(jié)樣式：

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

渲染結(jié)果如下：

<p class="foo bar baz boo">Hi</p>

樣式綁定也是一樣：

<my-component :class="{ active: isActive }"></my-component>

如果isActive為真，則渲染的HTML為：

<p class="foo bar active">Hi</p>

如果你的組件有多個根元素，你需要指定哪個根元素會使用該樣式。你可以使用組件屬性$attrs來完成(定義組件時用)：

<div id="app">
  <my-component class="baz"></my-component>
</div>

const app = Vue.createApp({})

app.component('my-component', {
  template: `
    <p :class="$attrs.class">Hi!</p>
    <span>This is a child component</span>
  `
})

你可以通過非繼承屬性章節(jié)來了解更多組件樣式。

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

對象語法

對象語法直接使用:style。除了是JavaScript對象以外，其他跟CSS都很像。樣式名稱，你可以使用駝峰命名或土耳其命名（短橫線分隔）：

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

直接綁定樣式對象有時候也不失為一個好的選擇：

<div :style="styleObject"></div>

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

對象語法會結(jié)合返回對象的計(jì)算屬性一起使用。

數(shù)組語法

:style的數(shù)組語法允許在一個元素上綁定多個樣式。

<div :style="[baseStyles, overridingStyles]"></div>

自動前綴

如果你看到:style中一個樣式需要瀏覽器前綴，例如：transform，Vue會自動檢測當(dāng)前瀏覽器并添加正確的前綴。

多值

你可以添加含有多樣式（自動前綴）的數(shù)組到:style中，例如：

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

只會渲染最后一個當(dāng)前瀏覽器支持的樣式。在這個示例中，只會渲染display:flex輸出非自動前綴版本流式布局到瀏覽器。