vue实现菜单列表

Vue 实现菜单列表的方法

使用 v-for 动态渲染菜单项

通过 Vue 的 v-for 指令可以动态渲染菜单项，数据通常存储在组件的 data 属性中。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' },
        { id: 3, name: '关于我们' }
      ]
    }
  }
}
</script>

嵌套菜单的实现

对于多级菜单，可以使用嵌套的 v-for 和递归组件。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          id: 1,
          name: '首页',
          children: [
            { id: 11, name: '子菜单1' },
            { id: 12, name: '子菜单2' }
          ]
        },
        { id: 2, name: '产品' }
      ]
    }
  }
}
</script>

使用 Vue Router 实现路由菜单

结合 Vue Router 可以创建带有路由功能的菜单。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.path">
      <router-link :to="item.path">{{ item.name }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/', name: '首页' },
        { path: '/products', name: '产品' },
        { path: '/about', name: '关于我们' }
      ]
    }
  }
}
</script>

使用第三方 UI 库

Element UI 或 Ant Design Vue 等库提供了现成的菜单组件。

<template>
  <el-menu mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template #title>产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
import { ElMenu, ElMenuItem, ElSubmenu } from 'element-plus'

export default {
  components: {
    ElMenu,
    ElMenuItem,
    ElSubmenu
  }
}
</script>

响应式菜单实现

通过 Vue 的响应式特性，可以动态更新菜单项。

<template>
  <ul>
    <li v-for="item in menuItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  <button @click="addMenuItem">添加菜单项</button>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '产品' }
      ],
      nextId: 3
    }
  },
  methods: {
    addMenuItem() {
      this.menuItems.push({
        id: this.nextId++,
        name: '新菜单项'
      })
    }
  }
}
</script>

菜单样式优化

添加 CSS 样式可以提升菜单的视觉效果。

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.id" class="menu-item">
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoped>
.menu {
  list-style: none;
  padding: 0;
}
.menu-item {
  padding: 8px 16px;
  cursor: pointer;
}
.menu-item:hover {
  background-color: #f0f0f0;
}
</style>