# v-bind
* 縮寫：`:`
## 1. 用法：
> 動態地綁定一個或多個特性，或一個組件 prop 到表達式。
> 在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象
> 在綁定 prop 時，prop 必須在子組件中聲明。可以用修飾符指定不同的綁定類型。
>
> 沒有參數時，可以綁定到一個包含鍵值對的對象。注意此時 class 和 style 綁定不支持數組和對象。
## 2. 示例：
```
var app = new Vue({
el:"#test",
data:{mgUrl:"images/01.png",
url:"http:www.baidu.com"
},
})
```
### 2.1 綁定一個屬性
```
<!-- 綁定一個屬性 -->
<img v-bind:src="imgUrl">
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<img :src="imageSrc">
```
### 2.2 內聯字符串拼接
```
//img :src="'/path/to/images/' + fileName" />
<div id="test">
<a v-bind:href="url"></a>
<img v-bind:src="'./images/' + '01.png' " alt="">
</div>
```
## 3 v-bind 中class的用法
### 3.1class綁定
* 寫法 :class={active:istrue} istrue為真添加active
> 可以傳給 v-bind:class 一個對象，以動態地切換 class：
> 此外，v-bind:class 指令也可以與普通的 class 屬性共存
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<style>
.red{
width: 100px;
height: 100px;
background: red;
}
.active{
background: blue;
}
.fontSize{
font-size: 30px;
}
</style>
```
```
<div id="test">
<div class="red" v-bind:class="{ active: blue, fontSize: big }"> 你好</div>
</div>
<script>
var app = new Vue({
el:"#test",
data:{
url:"http:www.baidu.com",
imgUrl:"images/01.png",
blue:true,
big:false
}
})
</script>
```
> 綁定的數據對象不必內聯定義在模板里：
```
<div v-bind:class="classObject"></div>
data: {
classObject: {
active: true,
fontSize: true
}
}
```
### 3.2 綁定數組
```
<div class="red" v-bind:class="[activeClass, errorClass]">123</div>
data: {
activeClass: 'active',
errorClass: 'fontSize'
}
```
渲染為
```
<div class=" red active fontSize"></div>
```
#### 3.2.1綁定 三元表達式
> 這樣寫將`始終`添加 errorClass，但是只有在 `isActive 是 true` 時才添加 activeClass
```
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
data:{
isActive:true,
activeClass: 'active',
errorClass: 'fontSize'
}
```
> 當有多個條件 class 時這樣寫有些繁瑣。所以在數組語法中也可以使用對象語法：
```
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
```
