# 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)
Sign in with Wallet
Connect another wallet