现在有这样一组数据结构

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

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

     
    
      
        
       
            {
    {item1}}            
        
                
         
                    {
    {item2}}                    
          
 
           
{ {item3}}
 
          
                
            
        
        
    
      
     

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

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

　则HTML修改为

     
    
      
        
       
            {
    {index}}            
        
                
         
                    {
    {key}}                    
          
 
           
{ {val}}
 
          
                
            
        
        
    
      
     

　　页面显示效果为