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>