Vue 使用綁定 class 筆記

在使用 Bootstrap 會用到 Navbar 選單，做到動態選單時候會用到 isActive，要怎麼透過 Vue 綁定到 class 上面?照官方實作可以簡單完成。

需求解法

<li class="nav-item">
  <a class="nav-link" :class="{active: mode === 'edit'}" aria-current="page" href="javascript:;" @click="mode = 'edit'">編輯</a>
</li>
<li class="nav-item">
  <a class="nav-link" :class="{active: mode === 'result'}" href="javascript:;" @click="mode = 'result'">結果</a>
</li>

export default {
  data(){
    return {
      mode: 'edit',
    }
  },

綁定 HTML Class

物件語法

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

靜態與動態 Class 結合

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

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

結果

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

搭配 computed

<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'
    }
  }
}

陣列語法

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

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

result:

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

在組件上使用

還滿特別的，建議去看官方文件範例:Class 与 Style 绑定 - 在組件上使用 | Vue.js