示例：
<template>
<div>
<div
class="item"
v-for="(item, index) of list"
:key="index"
>
<div class="item-title border-bottom">
<span class="item-title-icon"></span>
{{item.title}}
</div>
<div v-if="item.children" class="item-children">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script>
<style lang="stylus" scoped>
.item-title
line-height: .8rem
font-size: .32rem
padding: 0 .32rem
.item-title-icon
display: inline-block
position: relative
left: .06rem
top: .06rem
width: .36rem
height: .36rem
background: url('http://s.qunarzz.com/piao/image/touch/sight/detail.png')
margin-right: .1rem
background-size: .4rem 3rem
.item-children
padding: 0 .2rem
</style>
數(shù)據(jù)格式：
{
"ret": true,
"data": {
"sightName": "大連圣亞海洋世界(AAAA景區(qū))",
"bannerImg": "http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_600x330_bf9c4904.jpg",
"gallaryImgs": ["http://img1.qunarzz.com/sight/p0/201404/23/04b92c99462687fa1ba45c1b5ba4ad77.jpg_r_800x800_e9c1d2be.jpg", "http://img1.qunarzz.com/sight/p0/1709/76/7691528bc7d7ad3ca3.img.png_r_800x800_56e729ef.png"],
"categoryList": [{
"title": "成人票",
"children": [{
"title": "成人三館聯(lián)票",
"children": [{
"title": "成人三館聯(lián)票 - 某一連鎖店銷售"
}]
},{
"title": "成人五館聯(lián)票"
}]
}, {
"title": "學(xué)生票"
}, {
"title": "兒童票"
}, {
"title": "特惠票"
}]
}
}
