vue组件递归
项目中出现多级菜单时,需要多层for循环时,但是当菜单增加层级时,需要在页面结构中增加一层for循环。这时我们可以使用组件递归的思想来实现:如下demo:1、定义菜单组件<template><ul><li v-for="(item, index) in list" :key="index"><p>{{ item.name }}</p>&l
·
项目中出现多级菜单时,需要多层for循环时,但是当菜单增加层级时,需要在页面结构中增加一层for循环。
这时我们可以使用组件递归的思想来实现:
如下demo:
1、定义菜单组件
<template>
<ul>
<li v-for="(item, index) in list" :key="index">
<p>{{ item.name }}</p>
<treeMenu :list="item.children"></treeMenu>
</li>
</ul>
</template>
<script>
export default {
name: "treeMenu",
props: ["list"],
data() {
return {};
},
};
</script>
<style scoped>
ul {
padding-left: 20px;
}
</style>
2、组件调用
3、效果图:
更多推荐
已为社区贡献3条内容
所有评论(0)