Implementation code of v-for loop node in Vue-JS Tutorial-php.cn

Implementation code of v-for loop node in Vue

不言

Release： 2018-08-14 11:55:13

Original

1923 people have browsed it

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>

Copy after login

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!