v-bind 主要是動(dòng)態(tài)更新HTML元素上的屬性溺欧，回顧一下下面的示例：
鏈接的href屬性和圖片的src屬性都被動(dòng)態(tài)設(shè)置了，當(dāng)數(shù)據(jù)變化時(shí)柏肪，就會(huì)重新渲染姐刁。在數(shù)據(jù)綁定中，最常見的兩個(gè)需求就是元素的樣式名稱class和內(nèi)聯(lián)樣式styled的動(dòng)態(tài)綁定烦味，他們也是HTML的屬性聂使，因此可使用v-bind指令。我們只需要用v-bind計(jì)算出表達(dá)式最終的字符串就可以谬俄，不過有時(shí)候表達(dá)式的邏輯較復(fù)雜岩遗，使用字符串拼接方法較難閱讀和維護(hù)，所以Vue.js增強(qiáng)了對(duì)class和style的綁定凤瘦。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>了解 v-bind 指令</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">鏈接</a>
<img style="height: 400px;width: 300px;" v-bind:src="imgUrl">
<br>
<br>
<!--縮寫為-->
<a :href="url">鏈接</a>
<img style="height: 400px;width: 300px;" :src="imgUrl">
</div>
<!--自動(dòng)識(shí)別最新穩(wěn)定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
url:'https://www.baidu.com',
imgUrl:'http://b127.photo.store.qq.com/psb?/440982b8-1f1e-473c-b41d-b630005d5f65/k47uYaiYTmzFY29wd.*P67qQrqqT3MhfQ7PypQE3b4g!/b/dDb0wUsuBAAA&bo=gALEA1IDAAUBKB4!&rf=viewer_4'
}
})
</script>
</body>
</html>
了解v-bind指令.png
