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"

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