本文共 2147 字，大约阅读时间需要 7 分钟。

item

<template>  <li>    <div @click="toggle">        <!-- 标题 -->      {   {   model.title}}      <!-- 有子元素就显示 -->      <span v-if="isFolder">[{   {   open ? '-' : '+'}}]</span>    </div>    <!-- 子树 -->    <ul v-show="open" v-if="isFolder">      <item class="item" v-for="model in model.children" :model="model" :key="model.title"></item>    </ul>  </li></template><script>export default {     name: "Item",  props: {       model: Object  },  data: function() {       return {         open: false  // 打开状态    };  },  computed: {       isFolder: function() {    // 是否有子树      return this.model.children && this.model.children.length;    }  },  methods: {       toggle: function() {         if (this.isFolder) {           this.open = !this.open;      }    },  }};</script>

index

<template>  <div id="app">    <ul>      <item class="item" :model="treeData"></item>    </ul>  </div></template><script>import Item from "./Item";export default {     name: "app",  data() {       return {         treeData: {           title: "Web全栈架构师",        children: [          {               title: "Java架构师"          },          {               title: "JS高级",            children: [              {                   title: "ES6"              },              {                   title: "动效"              }            ]          },          {               title: "Web全栈",            children: [              {                   title: "Vue训练营",                expand: true,                children: [                  {                       title: "组件化"                  },                  {                       title: "源码"                  },                  {                       title: "docker部署"                  }                ]              },              {                   title: "React",                children: [                  {                       title: "JSX"                  },                  {                       title: "虚拟DOM"                  }                ]              },              {                   title: "Node"              }            ]          }        ]      }    };  },  components: {    Item }};</script>