Vue双重循环渲染数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>版本更新历史记录</title>
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>

</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .zong{
        margin:2rem;
    }
    .biaoti{
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        background:#E6EEFA;
        padding: 0.2rem;
    }
    .gxicon{
        width:2rem;
        margin-right: 1rem;
        margin-left: 1rem;
    }
    .shijian{
        color: #aaa;
    }
    .neirong{
        display: flex;
        flex-direction: column;
        font-size: 1rem;
        margin:1rem;
    }
    .wendang{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 1rem;
    }
    .ljicon{
        width:1.5rem;
    }
</style>
<body>
<div id="Vue">
    <div class="zong" v-for="(item,index) in jilu" :key="index" @click="aaa(index)" > //第一层循环
        <div class="biaoti">
            <img class="gxicon" src="https://sucai.suoluomei.cn/sucai_zs/images/20191016173025-gengxin.png" alt="">
            <div class="shijian">
                <span style="">更新时间:</span><span style="margin-right: 1rem">{{item.shijian}}</span><span>{{item.banben}}</span>
            </div>
        </div>
        <div  v-for="(item1,index2) in item.jilutwo" :key="index2">    //第二层循环
            <div style="color: #aaa;font-weight: 600;margin-bottom: 0.5rem;margin-top: 0.5rem">{{item1.neirong}}</div>
            <div class="neirong"  v-for="item2 in item1.jiluone">
                <div>{{item2.lishi}}</div>
            </div>
            <div class="wendang">
                <img class="ljicon" src="https://sucai.suoluomei.cn/sucai_zs/images/20191016174325-af12879e982ea2adabff7638e5d1c10.png" alt="">
                <span style="color:#0492ed;margin-left:0.5rem;">需求文档:</span>
                <a style="color: #0492ed;" target="_Blank" :href="item.a">{{item.a}}</a>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#Vue",
        data:{
            jilu:[
                {
                    genxin:"更新时间:",
                    shijian:"2019年10月16日",
                    wendnag:"更新文档:",
                    banben:"版本号:1.3.4",
                    a:"https://sucai.suoluomei.cn/sucai_zs/images/20191016174325-af12879e982ea2adabff7638e5d1c10.png",
                    jilutwo:[
                        {
                            neirong:"更新内容:",
                            jiluone:[
                                {
                                    lishi:"1、提升了系统的稳定性",
                                },
                                {
                                    lishi:"1、提升了系统的稳定性",
                                },
                                {
                                    lishi:"1、提升了系统的稳定性",
                                }
                            ]
                        }
                    ]
                },
                {
                    genxin:"更新时间:",
                    shijian:"2019年10月15日",
                    wendnag:"更新文档:",
                    banben:"版本号:1.3.3",
                    a:"https://sucai.suoluomei.cn/sucai_zs/images/20191016173025-gengxin.png",
                    jilutwo:[
                        {
                            neirong:"更新内容:",
                            jiluone:[
                                {
                                    lishi:"1、提升了系统的稳定性",
                                },
                                {
                                    lishi:"1、提升了系统的稳定性",
                                },
                                {
                                    lishi:"1、提升了系统的稳定性",
                                }
                            ]
                        }
                    ]
                },
                {
                    genxin:"更新时间:",
                    shijian:"2019年10月15日",
                    wendnag:"更新文档:",
                    banben:"版本号:1.3.2",
                    a:"https://sucai.suoluomei.cn/sucai_zs/images/20191016174325-af12879e982ea2adabff7638e5d1c10.png",
                    jilutwo:[
                        {
                            neirong:"更新内容:",
                            jiluone:[
                                {
                                    lishi:"1、提升了系统的稳定性",
                                },
                                {
                                    lishi:"1、提升了系统的稳定性",
                                }
                            ]
                        }
                    ]
                },
                {
                    genxin:"更新时间:",
                    shijian:"2019年10月15日",
                    wendnag:"更新文档:",
                    banben:"版本号:1.3.1",
                    a:"https://sucai.suoluomei.cn/sucai_zs/images/20191016174325-af12879e982ea2adabff7638e5d1c10.png",
                    jilutwo:[
                        {
                            neirong:"更新内容:",
                            jiluone:[
                                {
                                    lishi:"1、提升了系统的稳定性",
                                }
                            ]
                        }
                    ]
                }
            ]
        },
        methods:{
            aaa:function (e) {
                console.log(e)
            },
        },
        created(){

        }
    })
</script>
<script>
    $(document).ready(function () {

    });
</script>
</html>


你可能感兴趣的:(VUE.js)