# 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"}
},
```
