Vue | v-bind:class&style 不同的表示法

1. 物件的表示 Object Syntax

<div v-bind:class="{a: isA, b: isB}"></div>

data: {
  isA: true,
  isB: false
}

這裡對 a 和 b 這兩個名稱的class，分別指定 isA 和 isB 的 Vue屬性名稱，改變這兩個屬性的value(bool)，即可以控制這個div標籤套用哪個class樣式，輕鬆實現toggle class。

2. 陣列的表示 Array Syntax

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

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

如果想實現toggle class

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

又或者結合物件

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

---

https://vuejs.org/v2/guide/class-and-style.html

Comments

[Konstantin BIFERT]

Another way of writing things could also be: :class="{ isA && a, isB && b}", keeps the things in the same directory so it's quite handy!