多层嵌套的json数据，渲染结构

多层嵌套的json数据，渲染结构

json 结构

{
    "ret": true,
    "msg":"成功",
    "data": {
        "a": [            
            { "id":"01","name": "11"}         
        ],
        "b": [{
                "name": "d",
                "values": [
                    {"name": "c"},
                    {"name": "c"}]        
            },
            {
                "name": "e",
                "values": [
                    {"name": "g"},
                    {"name": "g"}]                
            }
        ]
    }
}

循环输出-获取 json 数据中的 b 的内容

<div  v-for="(list,index) of b" :key="index">
        <h1 class="screen-key">{{list.name}}</h1>
        <ul>
            <li v-for="item in list.values" >{{item.name}}</li>
        </ul>    
   </div>

循环思路

第一个for循环将 b 作为list循环，第二个循环要以list.values来循环。在这里根元素的作用域块才能找到list。