# v-bind 及class與style綁定
>[success] 可在此處查看運行文檔中的代碼示例結果：[https://github.com/jianyaoo/Vue](https://github.com/jianyaoo/Vue)
[toc]
## v-bind指令
> v-bind指令的作用是動態更新html上的屬性。簡寫值為：
## 動態綁定class的幾種方式
### 01 - 對象語法
對象語法是指動態的傳遞給`v-bind:class`一個值，以便實現class的動態切換。
**<span style="padding-top:15px;display:inline-block;">基本對象語法</span>**
直接傳遞基本對象的方式。
```html
<div id="app">
<h1>綁定class樣式</h1>
<span v-bind:class="{active:isActive , hasError:isError}">模板</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
isActive:true,
isError:false,
classObject:{
hasTotal:true,
hasError:false
}
},
})
</script>
```
<div class="run">
運行結果：`<-span class="active"><-/span>`
</div>
>[info] 代碼解析：在綁定的對象中 active和hasError是否顯示取決于isActive和isError的值是否為true。如果true，則會顯示該class，如果為false，就不會顯示該class
**<span style="padding-top:15px;display:inline-block;">計算屬性對象</span>**
通過計算屬性去控制是否顯示當前class，一般用于當前class的控制邏輯比復雜時。
```html
<span v-bind:class="countClass">對象數據</span>
<script>
var vm = new Vue({
data:{
isActive:true,
isError:false,
classObject:{
hasTotal:true,
hasError:false
},
},
computed:{
countClass:function () {
var isActive = this.isActive && !this.isError;
var isTotal = this.classObject.hasTotal && !this.classObject.hasError;
return {
active:isActive,
isTotal:isTotal
}
}
}
})
</script>
```
>[info] 代碼解析：使用計算屬性動態設置class的方式和普通對象的方式一致，只是使用計算屬性控制的class的邏輯更為復雜一點。
### 02 - 數組語法
使用數組控制class的顯示與隱藏
**<span style="padding-top:15px;display:inline-block;">代碼示例</span>**
```
<span v-bind:class="[active , error]">數組</span>
<span v-bind:class="[{active:isActive} , error]">對象數組</span>
<span v-bind:class="[isActive?active:'' , error]">三元表達式數組</span>
var vm = new Vue({
el:"#app",
data:{
active:"activeItem",
error:"errorItem",
},
})
```
## 動態綁定行內樣式的幾種方式
類似于動態綁定class的方式，動態綁定行間樣式的方式也分為對象方式和數組，具體實現示例如下：
```
<span v-bind:style="{color:red,fontSize:size+'px'}">對象</span>
<span v-bind:style="styleObject">對象樣式</span>
<span v-bind:style="[colorStyle , sizeStyle]">數組樣式</span>
data:{
red:'red',
size:24,
styleObject:{
color:'yellow',
fontSize:'24px'
},
colorStyle:{color:"red"},
sizeStyle:{fontSize:"24px"}
},
```
