Home > Article > Web Front-end > Implementation code of v-for loop node in Vue

Implementation code of v-for loop node in Vue

不言Original: 2018-08-14 11:55:131920browse

The content of this article is about the implementation code of v-for loop node in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

<!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>

Related recommendations:

Introduction to optimization methods of file size in Vue projects

There are v-if and v-show in vue What's the difference? Summary of the differences between v-if and v-show

The above is the detailed content of Implementation code of v-for loop node in Vue. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to deep copy and shallow copy in js (code analysis)Next article：Detailed introduction to deep copy and shallow copy in js (code analysis)

See more

Implementation code of v-for loop node in Vue

Related articles