递归无限级目录树的原生JS+vue的实现方式

本文由清尘发表于2021-03-03 17:53最后修改于2021-03-04属于javascript分类

递归无限级目录树效果:

原生JS实现方式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>递归无限级目录树</title>
</head>
<body>

  <div class="lists"></div>
<script>
var data = [
  {
    name:'IT互联网',
    child:[
      {name:'编辑语言',child:[{name:'java'},{name:'c#/.net'},{name:'python'},
      {name:'前端开发',child:[{name:'jq'},{name:'vue'},{name:'react'}]}]},
      {name:'移动开发',child:[{name:'android开发'},{name:'IOS开发'}]},
      {name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'3D游戏'},{name:'2D游戏'}]}]}
      
    ]
  },
  {
    name:'设计创作',
    child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影后期'}]},
          {name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
          {name:'软件设计'}
    ]
  },
  {
    name:'升学考研',
    child:[{name:'考研'},{name:'大学'},{name:'初中'}]
  },
  {
    name:'职企考证',
    child:[{name:'公务员',child:[{name:'教师考试'},{name:'建筑工程'}]}]
  }
];

window.onload = function(){
  function getDate(data){
    var str = "<ul>";
    for(var i = 0; i<data.length; i++){
      str += "<li>"+data[i].name;
      if(data[i].child){
        str += getDate(data[i].child);
      }
      str += "</li>"
    }
    str += "</ul>";
    return str;
  }
   document.querySelector('.lists').innerHTML = getDate(data);
}
</script>

</body>
</html>

vue实现方式:

App.vue

<template>
  <div id="app">
    <Items :items="items" />
  </div>
</template>

<script>
import Items from './components/Items.vue'

export default {
  name: 'App',
  data(){
    return {
      items:[
  {
    name:'IT互联网',
    child:[
      {name:'编辑语言',child:[{name:'java'},{name:'c#/.net'},{name:'python'},
      {name:'前端开发',child:[{name:'jq'},{name:'vue'},{name:'react'}]}]},
      {name:'移动开发',child:[{name:'android开发'},{name:'IOS开发'}]},
      {name:'游戏开发',child:[{name:'phaser游戏开发'},{name:'webGL游戏开发',child:[{name:'3D游戏'},{name:'2D游戏'}]}]}
      
    ]
  },
  {
    name:'设计创作',
    child:[{name:'平面设计',child:[{name:'电商美工'},{name:'综合平面设计'},{name:'摄影后期'}]},
          {name:'UI设计',child:[{name:'交互设计'},{name:'webUI设计'},{name:'游戏UI设计'}]},
          {name:'软件设计'}
    ]
  },
  {
    name:'升学考研',
    child:[{name:'考研'},{name:'大学'},{name:'初中'}]
  },
  {
    name:'职企考证',
    child:[{name:'公务员',child:[{name:'教师考试'},{name:'建筑工程'}]}]
  }
]
    }
  },
  components: {
    Items
  }
}
</script>

<style>

</style>

src/components/Items.vue

<template>
  <div class="list">
  <ul>
    <Item v-for="(item,i) in items" :key="i" :item="item" />
  </ul>
  </div>
</template>
<script>
  import Item from '@/components/Item.vue';
  export default {
    props:['items'],
    data() {
      return {
        
      };
    },
  components: {
    Item
  },
  }
</script>

<style>

</style>

src/components/Item.vue


<template>
 <li>
      {{item.name}}
      <ul v-if="item.child">
        <Item v-for="(v,i) in item.child" :key="i" :item="v" />
      </ul>
 </li>
</template>
<script>
  export default {
    name:'Item',
    props:['item'],
    data() {
      return {
        
      };
    }
  }
</script>

<style>

</style>