<div id="app">
<category :list="items"></category>
</div>
<script>
const app=Vue.createApp({
data(){
return {
items:[{
type:'生物',
subtype:[
{
type:'植物',
subtype:[{type:'树木'},{type:'灌木'},{type:'青草'}]
},
{
type:'动物',
subtype:[{type:'猫'},
{type:'狗'},
{type:'鱼',
subtype:[{type:'鲤鱼'},{type:'鲨鱼'}]}
]
}
]
}]
}
}
})
app.component('category', {
props:{
list:{type:Array}
},
template: ` <ul><template v-if="list">
<li v-for="item in list">
{{item.type}}
<category :list="item.subtype"></category>
</li>
</template></ul> `
})
app.mount('#app')
</script> |
Java技术网站 → 『 Java开发技术 』 → 『 孙卫琴姐姐的Java技术专栏 』 → 【Vue.js技术专题】组件的递归
消息
查看
搜索
好友
邮件
复制
引用
IP: 已设置保密
