首頁  >  文章  >  web前端  >  Vue中v-for循環節點的實作程式碼

Vue中v-for循環節點的實作程式碼

不言
不言原創
2018-08-14 11:55:131912瀏覽

這篇文章帶給大家的內容是關於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