首页  >  文章  >  web前端  >  Vue中v-for循环节点的实现代码

Vue中v-for循环节点的实现代码

不言
不言原创
2018-08-14 11:55:131938浏览

本篇文章给大家带来的内容是关于Vue中v-for循环节点的实现代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="rrn">
<table  border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>父循环第一次</th>
        <th>子循环第一次</th>
        <th>json数据的第几条</th>
        <th>数值</th>
    </tr>
    <tbody v-for="dp,index in parentList" >
        <tr v-for="bp,indo in dp.childList">
         <td>{{index}}</td>
         <td>{{indo}}</td>
         <td>{{bp.index}}</td>
         <td>{{bp.childName}}</td>
        </tr>
    </tbody>
</table>
</p>
</body>
<script src="vue.js"></script>
<script>
    let er=new Vue({
        el:"#rrn",
        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>

相关推荐:

Vue项目中文件大小的优化方法介绍

vue中v-if和v-show有何区别?v-if与v-show之间的区别总结

以上是Vue中v-for循环节点的实现代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn