v-bind：是Vue提供的用於綁定html屬性的指令。 html中常見的屬性有：id、class、src、title、style等，他們都是以 名稱/值對 的形式出現，如：id="first" 本篇的內容主要是介紹使用v-bind指令動態給這些屬性賦值。 話不多說，上代碼： 代碼很簡單，主要分為兩 ...
v-bind：是Vue提供的用於綁定html屬性的指令。
html中常見的屬性有：id、class、src、title、style等，他們都是以 名稱/值對 的形式出現，如：id="first"
本篇的內容主要是介紹使用v-bind指令動態給這些屬性賦值。
話不多說，上代碼：
<body>
<div id="app">
<img v-bind:src="path" style="width: 200px;height: 200px"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
path : "img/clock.png"
}
});
</script>
</body>
代碼很簡單，主要分為兩個模塊：前端定義了一個Img標簽，它的src屬性值通過v-bind指令從Vue對象中獲取；js代碼定義了Vue對象，並聲明瞭data數據。
註意：在src前面我們添加了 “v-bind:” 千萬不要忘了v-bind後面的冒號，規則就是這麼定的。
運行結果：
接下來我要向大家介紹v-bind的一種簡寫形式，那就是我們在實際傳遞屬性值數據的時候可以不寫“v-bind”只留屬性名稱前面的冒號即可。
<body>
<div id="app">
<img :src="path" style="width: 200px;height: 200px"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
path : "img/clock.png"
}
});
</script>
</body>
這裡省略了“v-bind”，只在src屬性名前保留了冒號，看下運行結果：
結果一樣，大家有興趣可以動手嘗試一下html的其他屬性，畢竟實踐是最好的老師，寫程式要勤動手。
下麵我還要占用大家一點時間，講解一個小知識點，先單獨提取出一行代碼進行剖析：
<img v-bind:src="path" style="width: 200px;height: 200px"/>
這裡我們對屬性src做了綁定傳值，有時候我們會有這樣的需求：圖片的路徑不是固定的，可能有很多目錄，我們需要動態獲取路徑。假設Vue已經幫我們獲取了圖片伺服器的路徑，但是具體的目錄路徑需要我們前端經過處理獲取，再拼接上去。這時我們看以把"path"看做是一個表達式，通過“path + '/pic/a.png' ”的方法動態載入。
<body>
<div id="app">
<img v-bind:src="path + 'clock.png'" style="width: 200px;height: 200px"/>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
path : "img/"
}
});
</script>
</body>
運行結果：
每天進步一點點！
