v-bind:屬性綁定;
當我們並沒有使用v-bind使用的時候,突破不能顯示出來,會提示錯誤,提示我們使用v-bind;


當我們使用v-bind時圖片就可以顯示:

v-bind的簡寫是冒號:
使用v-bind進行樣式的修改:



進行對字符串的拼接:

以上實例總的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<script src="../js/vue.js"></script>
<script>
window .onload= () =>{
new Vue({
el:"#one",
data:{
imgurl:"https://cn.vuejs.org/images/logo.png",
myWidth:"120px",
myHeight:"240px",
fileName:"logo.png"
},
methods:{
}
});
}
</script>
</head>
<body>
<div id="one">
<!-- <img v-bind:src="imgurl" />-->
<!-- <img :src="imgurl" :width="myWidth" :height="myHeight"/>-->
<img :src="'../res/images/'+fileName" :width="myWidth" :height="myHeight"/>
</div>
</body>
</html>
