### 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'
}
}
})
~~~
