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"

这样就完成了数组嵌套循环