data.json

    1. <body>
    2.   <style>
    3.         img{
    4.             width: 12px;
    5.             opacity: 0.5;
    6.         }
    7.         img.active{
    8.             transform: rotate(90deg);
    9.             opacity: 1;
    10.         }
    12.     </style>
    13.     <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    14.     <div id='myApp'>
    15.         <h1>递归组件</h1>
    16.         <my-com v-for="item in list" :data="item" :key="item.title"></my-com>
    17.     </div>
    18.     <!-- 组件模板 -->
    19.     <template id='myTem'>
    20.         <div>
    21.             <img 
    22.                 @click="open=!open" 
    23.                 :class="open? 'active': ''" 
    24.                 src="./right.png" 
    25.                 v-if="data.list.length"
    26.             >
    27.             <b @click="open=!open">
    28.                 {{data.title}}
    29.                 <span v-if="data.list.length">({{data.list.length}})</span> 
    30.             </b>
    31.             <ul v-if='open'>
    32.                 <!-- 递归组件: 在一个组件模板中调用这个组件本身 -->
    33.                 <li v-for="item in data.list" is="my-com" :data="item" :key="item.title"></li>
    34.             </ul>
    35.         </div>
    36.     </template>
    37.     <script>
    38.         Vue.component('myCom', {
    39.             template: '#myTem',
    40.             props: ["data"],
    41.             data(){return { open: false }}
    42.         })
    43.         new Vue({
    44.             el: '#myApp',
    45.             data: {
    46.                 list: []
    47.             },
    48.             created() {
    49.                 fetch("./data.json").then(res=>{
    50.                     return res.json()
    51.                 }).then(res=>{
    52.                     this.list = res
    53.                 })
    54.             },
    55.         })
    56.     </script>
    57. </body>

    right.pngdata.json