vue实现一个可以展开的树状列表

以下是一个基于Vue.js的可展开树状列表的示例：

HTML模板：

<div id="app">
  <ul>
    <li v-for="item in data" :key="item.id">
      <span @click="toggle(item)">
        {{ item.name }}
        <i v-show="item.children && item.children.length > 0" :class="{'fa': true, 'fa-caret-right': !item.expanded, 'fa-caret-down': item.expanded}"></i>
      </span>
      <ul v-if="item.expanded">
        <template v-if="item.children">
          <tree-item :data="item.children"></tree-item>
        </template>
      </ul>
    </li>
  </ul>
</div>

<template id="tree-item">
  <li v-for="item in data" :key="item.id">
    <span @click="toggle(item)">
      {{ item.name }}
      <i v-show="item.children && item.children.length > 0" :class="{'fa': true, 'fa-caret-right': !item.expanded, 'fa-caret-down': item.expanded}"></i>
    </span>
    <ul v-if="item.expanded">
      <template v-if="item.children">
        <tree-item :data="item.children"></tree-item>
      </template>
    </ul>
  </li>
</template>

JavaScript代码：

Vue.component('tree-item', {
  template: '#tree-item',
  props: ['data'],
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
})

new Vue({
  el: '#app',
  data: {
    data: [{
      id: 1,
      name: 'Item 1',
      children: [{
        id: 2,
        name: 'Item 1.1',
        children: [{
          id: 3,
          name: 'Item 1.1.1'
        }, {
          id: 4,
          name: 'Item 1.1.2'
        }]
      }, {
        id: 5,
        name: 'Item 1.2',
        children: [{
          id: 6,
          name: 'Item 1.2.1'
        }, {
          id: 7,
          name: 'Item 1.2.2'
        }]
      }]
    }, {
      id: 8,
      name: 'Item 2',
      children: [{
        id: 9,
        name: 'Item 2.1'
      }, {
        id: 10,
        name: 'Item 2.2'
      }]
    }]
  },
  methods: {
    toggle(item) {
      item.expanded = !item.expanded;
    }
  }
})

在这个示例中，使用了两个组件：一个是树状列表的父组件，另一个是树状列表的子组件。父组件使用了v-for指令来遍历数据，并在每个节点上添加了一个点击事件，用于展开或收起子节点。子组件也使用了v-for指令来递归渲染子节点。

在JavaScript代码中，定义了一个Vue实例，并在data属性中定义了树状列表的数据。toggle方法用于切换节点的展开状态。在模板中，使用了font-awesome图标库中的图标来表示节点的展开状态