Code d'implémentation du nœud de boucle v-for dans Vue-js tutoriel-php.cn

Code d'implémentation du nœud de boucle v-for dans Vue

不言

Libérer： 2018-08-14 11:55:13

original

1932 Les gens l'ont consulté

Le contenu de cet article concerne le code d'implémentation du nœud de boucle v-for dans Vue. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

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

Copier après la connexion

Recommandations associées :

Introduction aux méthodes d'optimisation de la taille des fichiers dans les projets Vue

v-if et v-in vue Quelle est la différence ? Résumé des différences entre v-if et v-show

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!