用javascript和vuejs创建一棵树

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <tree :data="treeData"></tree>
</div>

Vue.component('tree', {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  template: `
    <ul>
      <li v-for="node in data" :key="node.id">
        {{ node.label }}
        <tree v-if="node.children" :data="node.children"></tree>
      </li>
    </ul>
  `
});

new Vue({
  el: '#app',
  data: {
    treeData: [
      {
        id: 1,
        label: 'Node 1',
        children: [
          {
            id: 2,
            label: 'Node 1.1',
            children: [
              {
                id: 3,
                label: 'Node 1.1.1'
              },
              {
                id: 4,
                label: 'Node 1.1.2'
              }
            ]
          },
          {
            id: 5,
            label: 'Node 1.2'
          }
        ]
      }
    ]
  }
});