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