vue3在template标签中展示从后端获取的侧边导航数据共有二级菜单
时间: 2024-09-14 13:10:40 浏览: 10
在Vue3中展示从后端获取的具有二级菜单的侧边导航数据,可以通过以下步骤实现:
1. 获取数据:首先确保你能够从后端接口成功获取到包含二级菜单的导航数据。数据通常以JSON格式返回。
2. 定义组件数据:在Vue3组件的`setup`函数中,使用`ref`或`reactive`定义一个响应式的数据属性来存储这些菜单数据。
3. 遍历数据渲染一级菜单:在`template`标签中,使用`v-for`指令遍历一级菜单数据,并为每个一级菜单创建一个容器,比如`ul`或`div`。
4. 渲染二级菜单:在每个一级菜单项内部,再次使用`v-for`指令遍历对应的二级菜单数据,并渲染出来。
5. 配合CSS样式:根据需求添加CSS样式,以美化侧边导航的展示效果,使其符合设计要求。
下面是一个简化的示例代码:
```vue
<template>
<div>
<ul>
<li v-for="item in menus" :key="item.id">
{{ item.name }}
<ul v-if="item.children && item.children.length">
<li v-for="child in item.children" :key="child.id">
{{ child.name }}
</li>
</ul>
</li>
</ul>
</div>
</template>
<script setup>
import { ref } from 'vue';
// 假设这是从后端获取的数据
const menus = ref([
{
id: 1,
name: '首页',
children: [
{ id: 11, name: '子菜单1' },
{ id: 12, name: '子菜单2' }
]
},
{
id: 2,
name: '关于',
children: [
{ id: 21, name: '子菜单3' }
]
}
]);
</script>
<style>
/* 根据需要添加样式 */
ul, li {
list-style: none;
}
ul {
padding-left: 20px;
}
</style>
```