vue-for循环嵌套操作示例

更新时间：2020-08-13 17:42:02 作者：startmvc

本文实例讲述了vue-for循环嵌套操作。分享给大家供大家参考，具体如下：<!DOCTYPEhtml><

本文实例讲述了vue-for循环嵌套操作。分享给大家供大家参考，具体如下：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 margin: 0;
 padding: 0;
 list-style: none;
 }
 </style>
</head>
<body>
<table id="app" border="1" cellspacing="0" cellpadding="0">
<tr>
 <td>父循环第几次</td>
 <td>子循环第几次</td>
 <td>json的第几条数据</td>
 <td>数值</td></tr>
<tbody v-for="x,index in parentList">
<tr v-for="i,index2 in x.childList">
 <td>{{index}}</td>
 <td>{{index2}}</td>
 <td>{{i.index}}</td>
 <td>{{i.childName}}</td>
</tr>
</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
<script>
 const app=new Vue({
 el:"#app",
 data:{
 parentList: [{
 childList: [{
 index: 1,
 childName: "第一个节点"
 }, {
 index: 2,
 childName: "第一个节点"
 }, {
 index: 3,
 childName: "第一个节点"
 }, {
 index: 4,
 childName: "第一个节点"
 }, {
 index: 5,
 childName: "第一个节点"
 }]
 },
 {
 childList: [{
 index: 6,
 childName: "第二个节点"
 }, {
 index: 7,
 childName: "第二个节点"
 }, {
 index: 8,
 childName: "第二个节点"
 }, {
 index: 9,
 childName: "第二个节点"
 }, {
 index: 10,
 childName: "第二个节点"
 }]
 },
 {
 childList: [{
 index: 11,
 childName: "第三个节点"
 }, {
 index: 12,
 childName: "第三个节点"
 }, {
 index: 13,
 childName: "第三个节点"
 }, {
 index: 14,
 childName: "第三个节点"
 }, {
 index: 15,
 childName: "第三个节点"
 }]
 }]
 }
 })
</script>
</html>

这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码，可得如下运行结果：