Vue组件里面的双重循环

最新推荐文章于 2024-04-24 10:14:22 发布

Jasmine549

最新推荐文章于 2024-04-24 10:14:22 发布

阅读量442

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_63507998/article/details/130523165

文章展示了如何在Vue.js中使用v-for指令进行数据绑定和嵌套循环，以渲染来自对象数组的复杂结构数据。每个大分类（如文学、流行、文化）下有多个子分类，通过两个不同的v-for循环分别遍历主要分类和子分类。

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

类似于：

要注意这里的{{el.name}}两次是拿到的不同的值

        <div class="bigbox" v-for="(el,id) in obj" :key="id">
            <p>{{ el.name }}</p>
            <div class="littlebox">
                <p  v-for="(el,id) in el.name1" :key="id">{{ el.name }}</p>
            </div>
        </div>

    data() {
        return{
            obj:[
                {name:'文学',id:0,name1:[
                    {name:'小说',id:0},
                    {name:'随笔',id:1},
                    {name:'日本文学',id:2},
                    {name:'散文',id:3},
                    {name:'诗歌',id:4},
                    {name:'童话',id:5},
                    {name:'名著',id:6},
                    {name:'港台',id:7},
                    {name:'更多»',id:8},
                ]},
                {name:'流行',id:0,name1:[
                    {name:'漫画',id:0},
                    {name:'推理',id:1},
                    {name:'绘本',id:2},
                    {name:'科幻',id:3},
                    {name:'青春',id:4},
                    {name:'言情',id:5},
                    {name:'奇幻',id:6},
                    {name:'武侠',id:7},
                    {name:'更多»',id:8},
                ]},
                {name:'文化',id:0,name1:[
                    {name:'历史',id:0},
                    {name:'哲学',id:1},
                    {name:'传记',id:2},
                    {name:'设计',id:3},
                    {name:'电影',id:4},
                    {name:'建筑',id:5},
                    {name:'回忆录',id:6},
                    {name:'音乐',id:7},
                    {name:'更多»',id:8},
                ]},
            ]
        }
    }