vue 多次循环_v-for range-CSDN博客

本文链接：https://blog.csdn.net/cofecode/article/details/80003837

需求：有以下一个数组，想将其对象里的信息展示出来，而且还要把对象下面的数组的具体信息也展示出来。v-for可以实现循环，但是能否再下一级进行渲染呢？答案是可以的。

list: [{
                        "scheme_id": "1",
                        "scheme_sn": "2018031416442200001",
                        "scheme_name": "测试支付宝",
                        "type": "",
                        "field_id": "0",
                        "user_id": "5",
                        "mother_id": "0",
                        "content": "测试支付宝",
                        "program_id": "1,2",
                        "status": "1",
                        "range": "1",
                        "obj": "5",
                        "add_time": "2018-03-14 16:44:22",
                        "is_handsel": "2",
                        "atten_del": "",
                        "up_time": null,
                        "obj_phone": "13521121232",
                        "programs": [{
                            "program_id": "1",
                            "reserve": "99701",
                            "program_name": "测试支付宝1",
                            "price": "0.0100",
                            "sale_num": "200"
                        }, {
                            "program_id": "2",
                            "reserve": "4895",
                            "program_name": "阿萨打算",
                            "price": "0.0200",
                            "sale_num": null
                        }]
                    }, {
                        "scheme_id": "2",
                        "scheme_sn": "2018031416512800002",
                        "scheme_name": "阿散发撒",
                        "type": "",
                        "field_id": "0",
                        "user_id": "5",
                        "mother_id": "0",
                        "content": "阿斯达",
                        "program_id": "2,3",
                        "status": "2",
                        "range": "1",
                        "obj": "5",
                        "add_time": "2018-03-14 16:51:28",
                        "is_handsel": "2",
                        "atten_del": "",
                        "up_time": null,
                        "obj_phone": "13521121232",
                        "programs": [{
                            "program_id": "2",
                            "reserve": "4895",
                            "program_name": "阿萨打算",
                            "price": "0.0200",
                            "sale_num": null
                        }, {
                            "program_id": "3",
                            "reserve": "10",
                            "program_name": "测试多个程序方案赠送1",
                            "price": "0.0000",
                            "sale_num": null
                        }]
                    }]

    <div id="app">
        <div v-for ="item in list">
            <p>{{item.scheme_sn}}</p>
            <p v-for="items in item.programs">程序id {{items.program_id}}</p>
            <p v-for="items in item.programs">程序名称 {{items.program_name}}</p>
        </div>
    </div>