Vue中的树形结构

利用递归

Main.vue

<template>
  <div>
    <ul v-for="leave in demoData" :key="leave.name">
      <menu-item :leave="leave"></menu-item>
    </ul>
  </div>

</template>

<script>
    import MenuItem from '@/components/MenuItem'
    export default {
        name: "Main",
        components: {
          'menu-item': MenuItem
        },
        data (){
          return {
            demoData: demoData
          }
        }
    }

    const demoData = [{
      name: '迪卡侬产品',
      children: [{
        name: '跑步',
        children: [{
          name: '日常慢跑',
          children: [{
            name: '男士',
            children: [{
              name: '上衣'
            }, {
              name: '下装'
            }, {
              name: '跑步鞋'
            }, {
              name: '内衣'
            }

            ]
          }, {
            name: '女士',
            children: [{
              name: '上衣'
            }, {
              name: '下装'
            }, {
              name: '跑步鞋'
            }, {
              name: '内衣'
            }

            ]
          }, {
            name: '儿童',
            children: [{
              name: '上衣'
            }, {
              name: '下装'
            }, {
              name: '跑步鞋'
            }, ]
          }]
        }, {
          name: '公路竞赛'
        }, {
          name: '越野跑'
        }

        ]
      }, {
        name: '户外山地'
      }, {
        name: '健身'
      }, {
        name: '游泳',
        children: [{
          name: '泳衣'
        }, {
          name: '游泳附件'
        }, {
          name: '游泳启蒙'
        }, {
          name: '水中有氧运动'
        }, {
          name: '水中团队游戏'
        }]
      }

      ]
    }, {
      name: '迪卡侬品牌'
    }];
</script>

MenuItem.vue

<template>
 <li>
   {{leave.name}}
   <ul>
     <menu-item v-for="item in leave.children" :leave="item" :key="item.name">

     </menu-item>
   </ul>
 </li>
</template>

<script>
  import MenuItem from '@/components/MenuItem'
  export default {
    name: 'menu-item',
    props: ['leave'],
    components: {
      'menu-item': MenuItem
    },
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

参考：http://jsfiddle.net/d7k6vz31/2/embedded/js,html,css,result/dark/