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

最新推荐文章于 2025-05-05 14:45:38 发布

原创最新推荐文章于 2025-05-05 14:45:38 发布 · 2.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #json #vue.js #javascript

本文介绍如何在Vue中使用多层嵌套的JSON数据来实现动态侧边导航栏，包括数据结构的设计、VantUI组件库的应用及响应式布局的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

*多层嵌套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里面的写法

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeKey: 0,
      About: [],
   
    };
  },
  created() {
    // 遍历我们自己写的数据
    axios.get("http://localhost:8080/About.json").then((res) => {
      this.About = this.list = res.data.data.users;
     
    });
  }
};
</script>

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

如果我们想遍历出对应的数据就需要在原本的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代码

   <div class="box">
          <van-sidebar v-model="activeKey" @change="OnClick">
            <van-sidebar-item v-for="(item,index) in About " :key="index" :title="item.name" />
          </van-sidebar>
          <div class="bos">{{bout}}</div>
        </div>

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

<style  scoped>
.box{
  display: flex;
}
.bos{
  width: 50%;
}
</style>

js代码

<script>
import axios from "axios";
export default {
  data() {
    return {
      activeKey: 0,
      About: [], 
      bout: [],
    };
  },
  created() {
    axios.get("http://localhost:8080/About.json").then((res) => {
      this.About = this.list = res.data.data.users;
      //默认设置展示第一个
      this.bout = this.About[0].cname.name_z;
      
    });
  },
  methods: {
    OnClick(index) {
      //获取一级json下面的二级json
      this.bout = this.About[index].cname.name_z;
    },
  },
};
</script>