vue实现菜单切换
Vue 实现菜单切换的方法
在 Vue 中实现菜单切换通常涉及动态绑定类名、条件渲染或状态管理。以下是几种常见的方法：
动态绑定 class 实现高亮切换
通过 v-bind:class 动态绑定类名，结合点击事件切换当前选中项：
<template>
<div>
<ul>
<li
v-for="item in menuItems"
:key="item.id"
:class="{ 'active': currentItem === item.id }"
@click="currentItem = item.id"
>
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
currentItem: 1,
menuItems: [
{ id: 1, name: '首页' },
{ id: 2, name: '产品' },
{ id: 3, name: '关于' }
]
}
}
}
</script>
<style>
.active {
color: red;
font-weight: bold;
}
</style>使用条件渲染切换内容
通过 v-if/v-show 显示不同菜单对应的内容：
<template>
<div>
<button @click="currentTab = 'home'">首页</button>
<button @click="currentTab = 'products'">产品</button>
<div v-if="currentTab === 'home'">
首页内容
</div>
<div v-else-if="currentTab === 'products'">
产品内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentTab: 'home'
}
}
}
</script>使用 Vue Router 实现路由菜单
对于多页面应用，推荐使用 Vue Router：
// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import Products from './views/Products.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/products', component: Products }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router<!-- App.vue -->
<template>
<router-link to="/">首页</router-link>
<router-link to="/products">产品</router-link>
<router-view></router-view>
</template>使用组件化方式实现复杂菜单
对于复杂菜单系统，可以拆分为独立组件：
<template>
<div>
<Menu :items="menuItems" @select="handleSelect" />
<Content :current="selectedItem" />
</div>
</template>
<script>
import Menu from './Menu.vue'
import Content from './Content.vue'
export default {
components: { Menu, Content },
data() {
return {
selectedItem: null,
menuItems: [...]
}
},
methods: {
handleSelect(item) {
this.selectedItem = item
}
}
}
</script>以上方法可根据项目需求选择或组合使用。对于简单需求，动态 class 绑定足够；对于多页面应用，Vue Router 是最佳选择；复杂菜单系统建议采用组件化方式实现。
