数组遍历——Vue.js

Posted 2020-10-15 ____查无此人〆

现在有这样一组数据结构

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

要实现如下结果，则在页面修改

<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>

那么问题来了，这样修改的话，数据都是写死的。
接下来就得考虑另一种写法

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

　则html修改为

<div id="app">
    <ul>
        <li v-for="(items, index) in newContent">
            {{index}}
            <ul>
                <li v-for="(item, key) in items">
                    {{key}}
                    <ul>
                        <li v-for="val in item">{{val}}</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

　　页面显示效果为