vue.js - vuejs怎么进行这个数组的循环?

问题描述

问 题

数据结构是下面这样的:

//level02和level03里面的元素的顺序是对应好的。
    new Vue({
        el: '#app',
        data: {
            content: [{
                'level01':'第1组',
                'level02': ['水果', '运动'],
                'level03': [
                    ['苹果', '梨', '香蕉'],
                    ['篮球', '足球', '羽毛球']
                ]
            },{
                'level01':'第2组',
                'level02': [ '星系', '行星'],
                'level03': [
                    ['银河系', '仙女座星系', '半人马座星系'],
                    ['水星', '金星', '地球']
                ]
            }]
        }
    });

问题1：
怎么循环出这样的结果?

第1组：
水果: 苹果  梨    香蕉
运动: 篮球  足球  羽毛球


第2组：
星系：银河系  仙女座星系  半人马座星系
行星: 水星   金星        地球

可以直接在下面的html修改

<div id="app">
    <ul>
        <li v-for="item1 in level01">
            {{item1}}
            <ul>
                <li v-for="item2 in level02">
                    {{item2}}
                    <ul>
                        <li v-for="item3 in level03">{{item3}}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

问题2：
因为数据都是写死的，所以数据结构改成下面这样会不会更好些？如果下面这样写数据结构更好，那html中循环的语法又应该怎么写呢？

    new Vue({
        el: '#app',
        data: {
            content: [
                ['第1组',['水果', '运动'],[['苹果', '梨', '香蕉'],['篮球', '足球', '羽毛球']]],
                ['第2组',[ '星系', '行星'],[['银河系', '仙女座星系', '半人马座星系'],['水星', '金星', '地球']]]
            ]
        }
    });

解决方案

你的数据结构是写死的，demo中优化了一下数据结构，优化后再嵌套循环，至于效率这些我都没有考虑，只是直观的给你梳理了整个过程。

---

var data =  {
            '第1组': {
                '水果': ['苹果', '梨', '香蕉'],
                '运动': ['篮球', '足球', '羽毛球']
            },
            '第2组': {
                '星系': ['银河系', '仙女座星系', '半人马座星系'],
                '行星': ['水星', '金星', '地球']
            },
        };

demo

这篇关于vue.js - vuejs怎么进行这个数组的循环?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！