Vue循環數組、循環嵌套數組v-for


利用Vue循環輸出標簽

先在"script"中寫入一個數組

之后在上方"div"標簽中做循環輸出,使用"v-for"

這里的"v-for"標簽中,"item"單個數組項,可以隨意替換所需要的名稱,"list"是"script"中傳遞來的數組。

整句for語句可以理解為“list”中的"item"單個數組值做循環,當有循環時做添加輸出標簽。

標簽內的"{{item}}"則是將單個數組內容顯示在頁面上。

效果如下圖所示:

 

這里的數據除了可以將數組內容顯示在前端頁面,也可以將數組序列號顯示顯示出來

加上key就可以將數組的序列輸出

顯示效果如下:

前端頁面輸出循環嵌套數組

上圖數組內容為嵌套形式,分為大標題小標題

之后再html部分編輯循環輸出

 

第一個"ul>li"循環輸出大標題,第二個再for語句中,直接查找item下的news子數組,之后,依次輸出

輸出內容為子數組的"title"

這樣就完成了數組嵌套循環


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM