Vue写出父子循环（v-for）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div2{
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="div1" v-for="parents in list">
            父亲:{{parents.name}},年龄:{{parents.age}},性别:{{parents.sex}}
            <div class="inline">
                <span v-if="parents.child.length!=0">儿子:</span>
                <div class="div2" v-for="(childs,ind) in parents.child">
                    {{childs.name}}({{childs.age}}岁){{parents.child.length!=1&&ind!=parents.child.length-1?'和':''}}
                </div>
            </div>
            <hr>
        </div>
    </div>
</body>
<script src=" https://cdn.jsdelivr.net/npm/vue/dist/vue.js "></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            list: [{
                name: "张三 ",
                age: 28,
                sex: "man ",
                child: [{
                    name: "张小三 ",
                    age: 3
                }, {
                    name: "小小三 ",
                    age: 1
                }]
            }, {
                name: "李四 ",
                age: 20,
                sex: "women ",
                child: [{
                    name: "李小四 ",
                    age: 4
                }]
            },{
                name: "王五 ",
                age: 20,
                sex: "women ",
                child: []
            }]
        }
    })
</script>

</html>
posted @ 2019-10-28 15:54  杏菜  阅读(472)  评论(0)    收藏  举报