vue实现目录列表
使用 Vue 实现目录列表
数据驱动渲染
通过 Vue 的 v-for 指令动态渲染目录结构，数据格式建议采用嵌套数组或树形结构。例如：
data() {
return {
menuItems: [
{ title: '首页', path: '/' },
{
title: '产品',
children: [
{ title: '产品A', path: '/product/a' }
]
}
]
}
}递归组件实现
对于多级目录，需创建递归组件。新建 MenuItem.vue 组件：
<template>
<li>
<router-link v-if="item.path" :to="item.path">{{ item.title }}</router-link>
<span v-else>{{ item.title }}</span>
<ul v-if="item.children">
<menu-item
v-for="child in item.children"
:key="child.title"
:item="child"
/>
</ul>
</li>
</template>
<script>
export default {
name: 'MenuItem',
props: ['item']
}
</script>样式优化
添加基础样式增强可读性：
ul {
list-style-type: none;
padding-left: 1em;
}
li {
margin: 0.5em 0;
position: relative;
}
a {
text-decoration: none;
color: #2c3e50;
}
a:hover {
color: #42b983;
}动态激活状态
结合 Vue Router 实现当前路由高亮：
computed: {
isActive() {
return this.$route.path === this.item.path
}
}模板中添加动态 class：
<router-link
:class="{ 'active': isActive }"
:to="item.path"
>
{{ item.title }}
</router-link>交互功能扩展
添加折叠/展开功能：
data() {
return {
isOpen: false
}
},
methods: {
toggle() {
this.isOpen = !this.isOpen
}
}模板中绑定点击事件：
<span @click="toggle" v-if="item.children">
{{ item.title }} {{ isOpen ? '▼' : '▶' }}
</span>
