# 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>
```
