iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

輕鬆Vue一下系列 第 5

Day5-迴圈v-for

  • 分享至 

  • xImage
  •  

v-for在vue中扮演著迴圈的角色,它的用法分為兩種:
1.顯示出目標陣列:
https://ithelp.ithome.com.tw/upload/images/20190921/20112076yEOg2F2EHD.jpg
https://ithelp.ithome.com.tw/upload/images/20190921/20112076vaDmzb4erR.jpg
item in items表示著一個名為item的物件在items陣列中循環,再藉由{{item.message}},將陣列中所有索引值message顯示於網頁中,結果如下:
https://ithelp.ithome.com.tw/upload/images/20190921/20112076T0545LKFry.jpg
2.顯示出目標物件所有的屬性:
https://ithelp.ithome.com.tw/upload/images/20190921/20112076mKZoR1WjxF.jpg
https://ithelp.ithome.com.tw/upload/images/20190921/20112076F94ci9KxcJ.jpg
value in object表示著一個名為value的物件在object物件中循環,再藉由{{value}},將物件中的所有屬性之值顯示於網頁中,結果如下:
https://ithelp.ithome.com.tw/upload/images/20190921/20112076q99JXlB70O.jpg
明日預告:雙向綁定v-model(文字)


上一篇
Day4-條件渲染(2)
下一篇
Day6-雙向綁定v-model(文字)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言