简单的递归效果

image.png

数据

"categoryList": [{
       "title": "成人票",
       "children": [{
         "title": "成人三馆联票",
         "children": [{
           "title": "成人三馆联票 - 某一连锁店销售"
         }]
       },{
         "title": "成人五馆联票"
       }]
     }, {
       "title": "学生票"
     }, {
       "title": "儿童票"
     }, {
       "title": "特惠票"
     }]

<template>
    <div>
      <div class="item" v-for="(item,index) of categoryList" :key="index">
        <div class="item-title border-bootom">
            <span class="item-title-icon"></span>
            {{item.title}}
        </div>
        <!-- //递归 name 标签 -->
        <div v-if="item.children" class="item-chilren">
             <detalist :categoryList="item.children"></detalist>
        </div>

       </div>
       
    </div>
</template>

<script>
export default {
    name:'detalist',
    props:{
        categoryList:Array
    },
    data(){
        return{
           
        }
    }
   
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .item-title
        line-height .8rem
        font-style .32rem
        padding 0 .2rem
        .item-title-icon
            position relative
            display inline-block
            width  .4rem
            height .4rem
            left 0.06rem
            top .1rem
            background-image: url("http://s.qunarzz.com/vc_local/wanle/tu2.png");
            background-repeat: no-repeat;
            background-size: contain ;
            padding-right .05rem
    .item-chilren
        padding 0 .2rem


</style>