iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
自我挑戰組

從零開始Vuejs系列 第 13

[Day13] v-bind綁定圖片

  • 分享至 

  • xImage
  •  

今天是第十三天,我想分享一下使用v-bind這個指令進行圖片綁定

對,v-bind它又回來了

就如同第八天的介紹,v-bind這個指令可以進行屬性綁定,那就開始程式實作吧

首先先找圖片:
https://ithelp.ithome.com.tw/upload/images/20220925/20151006DWKsn1MbQy.jpg

圖片網址:
https://www.wired.com/images_blogs/photos/uncategorized/2007/08/06/domoflowers.jpg

這裡是HTML的部分
https://ithelp.ithome.com.tw/upload/images/20220925/20151006mFwD6GUOVw.png

這裡是JS的部分
https://ithelp.ithome.com.tw/upload/images/20220925/20151006TePb53HjrD.png

從HTML的部分可以看到程式碼中使用了v-bind來進行各種屬性的綁定,每個屬性都設立了對應的變數,可以在JS的部分進行變數相關的資料更改
https://ithelp.ithome.com.tw/upload/images/20220925/20151006rBfmiF5oiA.png

以及今天使用了第八天提到的v-bind縮寫。兩種寫法,執行結果並無二致。

這裡附上HTML屬性列表,可供參考
https://developer.mozilla.org/zh-TW/docs/Web/HTML/Attributes

使用v-bind這個指令進行圖片綁定就分享到這邊,我們第十四天見


上一篇
[Day12] Vue.js 與指令簡單介紹=>v-text ,v-html ,v-pre
下一篇
[Day14] Vue生命週期
系列文
從零開始Vuejs30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言