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>
運行結果:

每天進步一點點!
