使用vue实现多级菜单列表的具体代码

以下是使用 Vue 实现多级菜单列表的示例代码：

<template>
<div>
<ul>
<li v-for="item in menuList" :key="item.id">
{{ item.name }}
<ul v-if="item.children">
<li v-for="child in item.children" :key="child.id">
{{ child.name }}
<ul v-if="child.children">
<li v-for="grandchild in child.children" :key="grandchild.id">
{{ grandchild.name }}
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
menuList: [
{
id: 1,
name: '菜单1',
children: [
{
id: 2,
name: '子菜单1-1',
children: [
{
id: 3,
name: '孙菜单1-1-1'
},
{
id: 4,
name: '孙菜单1-1-2'
}
]
},
{
id: 5,
name: '子菜单1-2'
}
]
},
{
id: 6,
name: '菜单2'
}
]
}
}
}
</script>