---
# System prepended metadata

title: Vue.js 學習旅程Mile 8 – Class & Style Binding
tags: [w3HexSchool, Javascript, Vue]

---

# Vue.js 學習旅程Mile 8 – Class & Style Binding
###### tags: `w3HexSchool` `Vue` `Javascript`
## Class & Style Binding
`v-bind` 常用在 class 和 style 的綁定。一般 `v-bind` 的表達式為字串，但用在 class 和 style 的綁定時，還可以用`物件 { }` 或 `陣列[ ]` 的寫法。

## Class Binding
### 物件寫法1：`{key:value}` in HTML
* `key`：Class 名稱。
* `value`：判斷 Class 名稱是否出現的條件式。若值為 [truthiness](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) 則該 Class 名稱就會被賦予。
* 可以有多組 `key:value` 組合，也可以與已經存在 Class 屬性共存。 
* `value` 由 `data` 賦予為 true or false。

```htmlmixed=
<style>
.static {
  color: black;
  font-size: 16px;
}
.active {
  background-color: blue;
  color: white;
}
.error {
  background-color: red;
  color: white;
}
</style>
```

```htmlmixed=
<div
  class = "static"
  :class="{ active: isActive, error: hasError }">
</div>
```
```javascript=
data: {
  isActive: true,
  hasError: false
}
```


### 物件寫法2：`{key:value}` in `data`
* 多組 `key:value` 放在 `data` 內的 `classObject`。

```htmlmixed=
<div
  class = "static"
  :class="classObject">
</div>
```
```javascript=
data: {
  classObject: {
    active: true,
    error: false
  }
}
```

### 物件寫法3：`{key:value}` in `computed`
* 用 `computed` 監聽 `classObject` 的值。
* `value` 由 `data` 賦予為 true or false。

```htmlmixed=
<div
  class = "static"
  :class="classObject">
</div>
```
```javascript=
data: {
  isActive: true,
  hasError: false
},
computed: {
  classObject: function() {
    return {
      active: this.isActive,
      error: this.hasError,
    }
  }
}
```

### 陣列寫法1
* `data` 內寫陣列元素的 Class 名稱。

```htmlmixed=
<div :class="[activeClass, errorClass]">
</div>
```
```javascript=
data: { 
  activeClass: 'active', 
  errorClass: 'error' 
}
```

### 陣列寫法2 : 三元表達式
* 用 三元表達式 判斷 `activeClass` 是否出現。
```htmlmixed=
<div :class="[isActive ? activeClass : '', errorClass]">
</div>
```
```javascript=
data: { 
  isActive: true,
  activeClass: 'active', 
  errorClass: 'error' 
}
```

### 陣列寫法3 : 內含物件 `{key:value}`
* 陣列內包含 物件 `{key:value}` 判斷式。
```htmlmixed=
<div :class="[{ active : isActive }, errorClass]">
</div>
```
```javascript=
data: { 
  isActive: true,
  errorClass: 'error' 
}
```

## Style Binding
### 物件寫法1：`{property:value}` in HTML
* CSS 屬性使用 camelCase 或是 kebab-case (用 " " quotes 包住) 來表達。
* `value` 由 `data` 賦予值。

```htmlmixed=
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
</div>
```
```javascript=
data: { 
  activeColor: 'red', 
  fontSize: 30 
}
```

### 物件寫法2：`{property:value}` in `data`

* 多組 `property:value` 放在 `data` 內的 `styleObject`。

```htmlmixed=
<div :style="styleObject"></div>
```
```javascript=
data: { 
  styleObject: { 
    color: 'red', 
    fontSize: '13px' 
  } 
}
```

### 物件寫法3：`{property:value}`  in `computed`
* 用 `computed` 監聽 `styleObject` 的值。
* `value` 由 `data` 賦予值。

```htmlmixed=
<div :style="styleObject"></div>
```
```javascript=
data: {
  fontSize: 12, 
  fontWeight: 'bold'
},
computed: {
  styleObject: function() {
    return {
      fontSize: `${this.fontSize}px`, 
      fontWeight: this.fontWeight
    }
  }
}
```

### 陣列寫法
* `data` 內寫陣列元素的 Style 物件值。

```htmlmixed=
<div :style="[fontStyleObj, backgroundStyleObj]">
</div>
```
```javascript=
data: { 
  fontStyleObj: { 
    color: 'red', 
    fontStyle: 'italic' 
  }, 
  backgroundStyleObj: { 
    background: 'blue' 
  } 
}
```

### Auto-prefixing
* 使用 Vue 綁定 Style 時， Vue 會幫忙把 `-webkit-` ,  `-moz-` ... 等特定瀏覽器的特殊屬性所需的前綴字自動加上。

### Multiple Values
* Vue 2.3.0 之後，可以針對一個 CSS property 設定多個不同瀏覽器支援的 value。
* Vue 會從最後一個開始檢驗是否可以用在目前的瀏覽器上，符合的話就用此屬性設定樣式。

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

## 參考資料
* [Vue.js - Class and Style Bindings](https://vuejs.org/v2/guide/class-and-style.html)
* [Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定](https://cythilya.github.io/2017/04/21/vue-v-bind-class-and-style/)
* [Day09 - [Directives] 屬性綁定(Class and Style Binding)](https://ithelp.ithome.com.tw/articles/10194379)
* [Vue.js Core 30天屠龍記(第10天): Class 的綁定](https://ithelp.ithome.com.tw/articles/10204949)
* [Vue.js Core 30天屠龍記(第11天): 樣式綁定](https://ithelp.ithome.com.tw/articles/10205248)


