類和樣式繫結 ​

資料繫結中一個常見的需求是操作元素類列表和內聯樣式。由於 class 和 style 都是屬性，我們可以使用 v-bind 來動態地將它們賦值為字串，就像對其他屬性做的那樣。然而，嘗試使用字串連線來生成這些值可能會很煩人且容易出錯。因此，Vue在 v-bind 與 class 和 style 一起使用時提供了特殊的增強。除了字串外，表示式也可以計算為物件或陣列。

繫結HTML類 ​

繫結到物件 ​

我們可以將一個物件傳遞給 :class（即 v-bind:class），以動態切換類。

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

上述語法意味著 active 類的存在將由資料屬性 isActive 的真假性決定。

你可以透過在物件中有更多欄位來切換多個類。此外，:class 指令也可以與普通的 class 屬性共存。所以給定以下狀態

const isActive = ref(true)
const hasError = ref(false)

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

和以下模板

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

它將渲染

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

當 isActive 或 hasError 發生變化時，類列表將相應地更新。例如，如果 hasError 變為 true，類列表將變為 "static active text-danger"。

繫結的物件不必是內聯的

const classObject = reactive({
  active: true,
  'text-danger': false
})

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

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

這將渲染

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

我們還可以繫結到返回物件的 計算屬性。這是一個常見且強大的模式

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

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

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

繫結到陣列 ​

我們可以將 :class 繫結到陣列，以應用一系列類。

const activeClass = ref('active')
const errorClass = ref('text-danger')

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

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

這將渲染

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

如果你希望條件性地切換列表中的類，你可以使用三元表示式來完成

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

此操作始終應用errorClass，但只有當isActive為真值時才會應用activeClass。

然而，如果您有多個條件類，這可能會有些冗長。這就是為什麼您還可以在陣列語法內使用物件語法。

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

使用元件

本節假設您已瞭解元件。您可以隨時跳過此部分，稍後再回來。

當您在具有單個根元素的元件上使用class屬性時，這些類將新增到元件的根元素上，並與已存在的任何類合併。

例如，如果我們有一個名為MyComponent的元件，其模板如下

<!-- child component template -->
<p class="foo bar">Hi!</p>

然後在使用它時新增一些類

<!-- when using the component -->
<MyComponent class="baz boo" />

渲染的HTML將如下所示

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

同樣，這也適用於類繫結

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

當isActive為真值時，渲染的HTML將如下所示

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

如果您的元件有多個根元素，您需要定義哪個元素將接收此類。您可以透過使用$attrs元件屬性來實現這一點

<!-- MyComponent template using $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

將渲染

<p class="baz">Hi!</p>
<span>This is a child component</span>

您可以在傳遞屬性部分了解更多關於元件屬性繼承的資訊。

繫結內聯樣式

繫結到物件

:style支援繫結到JavaScript物件值 - 它對應於HTML元素的style屬性

const activeColor = ref('red')
const fontSize = ref(30)

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

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

儘管建議使用駝峰命名法鍵，但:style也支援短橫線連線的CSS屬性鍵（對應於它們在實際CSS中的使用） - 例如

<div :style="{ 'font-size': fontSize + 'px' }"></div>

通常，直接繫結到樣式物件是一個好主意，這樣模板會更簡潔

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

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

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

同樣，物件樣式繫結通常與返回物件的計算屬性一起使用。

繫結到陣列

我們可以將:style繫結到多個樣式物件的陣列。這些物件將被合併並應用於同一元素

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

自動字首化

當您在:style中使用需要供應商字首的CSS屬性時，Vue會自動新增適當的prefix。Vue透過在執行時檢查當前瀏覽器支援哪些樣式屬性來實現這一點。如果瀏覽器不支援某個特定屬性，則將測試各種帶字首的變體，以嘗試找到受支援的屬性。

多個值

您可以為樣式屬性提供多個（帶字首的）值的陣列，例如

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

這隻會渲染陣列中瀏覽器支援的最後一個值。在這個例子中，它將渲染display: flex，對於支援flexbox無字首版本的瀏覽器。