數組遍歷——Vue.js

現在有這樣一組數據結構

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>

　　頁面顯示效果為