### v-bind指令
`v-bind`是处理HTML中的标签属性的，例如`<div></div>`就是一个标签，`<img>`也是一个标签，我们绑定`<img>`上的src进行动态赋值。
~~~html
<div id="app">
<img v-bind:src="imgSrc" width="200px">
</div>
~~~
在 html 中我们用`v-bind:src=”imgSrc”`的动态绑定了 src 的值，这个值是在 vue 构造器里的data 属性中找到的。
~~~javascript
var app=new Vue({
el:'#app',
data:{
imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
}
})
~~~
我们在 data 对象在中增加了 imgSrc 属性来供 html 调用。
**v-bind 缩写**
~~~html
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
~~~
**绑定CSS样式**
在工作中我们经常使用v-bind来绑定css样式：
在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。
1、直接绑定class样式
~~~html
<div :class="className">1、绑定classA</div>
~~~
2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。
~~~html
<div :class="{classA:isOk}">2、绑定class中的判断</div>
~~~
3、绑定class中的数组
~~~html
<div :class="[classA,classB]">3、绑定class中的数组</div>
~~~
4、绑定class中使用三元表达式判断
~~~html
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
~~~
5、绑定style
~~~html
<div :style="{color:red,fontSize:font}">5、绑定style</div>
~~~
6、用对象绑定style样式
~~~html
<div :style="styleObject">6、用对象绑定style样式</div>
~~~
~~~javascript
var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})
~~~
