多层嵌套Json写法以及侧边导航栏的实现使用Vant ul组件

太过爱你忘了你带给我的痛 2021-07-24 21:57 217阅读 0赞

## \*多层嵌套Json的格式 就是在原本的json在添加一层的json 可以在遍历数据的数据进行 二次渲染 ##

**一层遍历循环的json格式是这样的**

{ 
        "data": { 
            "users": [
                { 
                    "id": 1,
                    "name": "全部"
                },
                { 
                    "id": 2,
                    "name": "中考真题"
                },
                { 
                    "id": 3,
                    "name": "化学"
                },
                { 
                    "id": 4,
                    "name": "英语"
                }
            ]
        }
    }

这里我使用的Vant UI 组件库 实现了一个侧边导航栏  
**下面是Css基本样式**

<div class="box">
           这里的点击事件 可以参考Vant文档
              <van-sidebar v-model="activeKey" @change="OnClick">
              这里使用v-fo遍历出来一级列表
                <van-sidebar-item v-for="(item,index) in About " :key="index" :title="item.name" />
              </van-sidebar>
            </div>

**这里是script里面的写法**

然后是完成的效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]

**如果我们想遍历出对应的数据就需要在原本的json的在添加一层json**  
**下面是 多层嵌套写法**

{ 
        "data": { 
            "users": [
                { 
                    "id": 1, "name": "全部", "cname": { 
                        "name_z":"1"
                    }
                },
                { 
                    "id": 2, "name": "中考真题", "cname": { 
                        "name_z": "数学"
                    }
                },
                { 
                    "id": 3, "name": "化学", "cname": { 
                        "name_z": "初三化学"
                    }
                },
                { 
                    "id": 4, "name": "英语", "cname": { 
                        "name_z": "1"
                    }
                }
            ]
        }
    }

**然后在实现点击左边 右边出相应的内容 也就是我们的嵌套json里面的数据**  
**下面是全部代码**

css代码

利用弹性盒子来设置样式对应

js代码

最后的效果完成图  
![在这里插入图片描述][20200826091320319.gif_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1JpY2tfYW5kX21vZGU_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/b670bbbf32754d1fa005f26a2575e972.png
[20200826091320319.gif_pic_center]: /images/20210724/61008a5e6bb24253a91cbb4d3ebc2571.png