直接跳到內容

Class 與 Style 綁定

數據綁定的一個常見需求場景是操縱元素的 CSS class 列表和內聯樣式。因為 classstyle 都是元素属性,我們可以和其他属性一樣使用 v-bind 將它們和動態的字符串綁定。但是,在處理比較複雜的綁定時,通過拼接生成字符串是麻煩且易出錯的。因此,Vue 專門為 classstylev-bind 用法提供了特殊的功能增強。除了字符串外,表達式的值也可以是對象或數組。

綁定 HTML class

綁定對象

我們可以向 :class (v-bind:class 的縮寫) 傳遞一個對象來動態切換 class:

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

上面的語法表示 active 是否存在取決於數據屬性 isActive真假值

你可以在對象中寫多個字段來操作多個 class。此外,:class 指令也可以和一般的 class 屬性共存。例如下面這樣的狀態:

js
const isActive = ref(true)
const hasError = ref(false)
js
data() {
  return {
    isActive: true,
    hasError: false
  }
}

配合以下模板:

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

渲染的結果會是:

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

isActive 或者 hasError 改變時,class 列表會隨之更新。舉例來說,如果 hasError 變為 true,class 列表也會變成 "static active text-danger"

綁定的對象並不一定需要寫成內聯字面量的形式,也可以直接綁定一個對象:

js
const classObject = reactive({
  active: true,
  'text-danger': false
})
js
data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}
template
<div :class="classObject"></div>

這將渲染出:

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

我們也可以綁定一個返回對象的計算屬性。這是一個常見且很有用的技巧:

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

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))
js
data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}
template
<div :class="classObject"></div>

綁定數組

我們可以給 :class 綁定一個數組來渲染多個 CSS class:

js
const activeClass = ref('active')
const errorClass = ref('text-danger')
js
data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}
template
<div :class="[activeClass, errorClass]"></div>

渲染的結果是:

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

如果你還想在數組中有條件地渲染某個 class,你可以使用三元表達式:

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

errorClass 會一直存在,但 activeClass 只會在 isActive 為真時才存在。

然而,這可能在有多個依賴條件的 class 時會有些冗長。因此你也可以在數組中嵌套對象:

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

在組件上使用

本節假設你已經有 Vue 組件的知識基礎。如果沒有,你也可以暫時跳過,以後再閱讀。

對於只有一個根元素的組件,當你使用了 class 屬性時,這些 class 會被添加到根元素上並與該元素上已有的 class 合併。

舉例來說,如果你聲明了一個組件名叫 MyComponent,模板如下:

template
<!-- 子組件模板 -->
<p class="foo bar">Hi!</p>

在使用時添加一些 class:

template
<!-- 在使用組件時 -->
<MyComponent class="baz boo" />

渲染出的 HTML 為:

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

Class 的綁定也是同樣的:

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

isActive 為真時,被渲染的 HTML 會是:

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

如果你的組件有多個根元素,你將需要指定哪個根元素來接收這個 class。你可以通過組件的 $attrs 屬性來指定接收的元素:

template
<!-- MyComponent 模板使用 $attrs 時 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>
template
<MyComponent class="baz" />

這將被渲染為:

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

你可以在透傳 Attribute 一章中了解更多組件的 attribute 繼承的細節。

綁定內聯樣式

綁定對象

:style 支持綁定 JavaScript 對象值,對應的是 HTML 元素的 style 屬性

js
const activeColor = ref('red')
const fontSize = ref(30)
js
data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}
template
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

儘管推薦使用 camelCase,但 :style 也支持 kebab-cased 形式的 CSS 屬性 key (對應其 CSS 中的實際名稱),例如:

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

直接綁定一個樣式對象通常是一個好主意,這樣可以使模板更加簡潔:

js
const styleObject = reactive({
  color: 'red',
  fontSize: '13px'
})
js
data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}
template
<div :style="styleObject"></div>

同樣的,如果樣式對象需要更復雜的邏輯,也可以使用返回樣式對象的計算屬性。

綁定數組

我們還可以給 :style 綁定一個包含多個樣式對象的數組。這些對象會被合併後渲染到同一元素上:

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

自動前綴

當你在 :style 中使用了需要瀏覽器特殊前綴的 CSS 屬性時,Vue 會自動為他們加上相應的前綴。Vue 是在運行時檢查該屬性是否支持在當前瀏覽器中使用。如果瀏覽器不支持某個屬性,那麼將嘗試加上各個瀏覽器特殊前綴,以找到哪一個是被支持的。

樣式多值

你可以對一個樣式屬性提供多個 (不同前綴的) 值,舉例來說:

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

數組僅會渲染瀏覽器支持的最後一個值。在這個示例中,在支持不需要特別前綴的瀏覽器中都會渲染為 display: flex

Class 與 Style 綁定已經加載完畢