vue实现列表菜单

Vue 实现列表菜单的方法

在 Vue 中实现列表菜单可以通过多种方式完成，以下是几种常见的方法：

使用 v-for 动态渲染列表

通过 Vue 的 v-for 指令可以动态渲染列表数据，结合 v-on 或 @click 实现菜单项的点击事件。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, name: '首页' },
        { id: 2, name: '关于我们' },
        { id: 3, name: '联系我们' }
      ]
    }
  },
  methods: {
    handleClick(item) {
      console.log('点击了:', item.name)
    }
  }
}
</script>

使用路由实现导航菜单

如果列表菜单用于导航，可以结合 Vue Router 实现路由跳转。

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

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

使用组件化实现可复用菜单

将菜单封装为可复用的组件，方便在多个地方调用。

<!-- MenuList.vue -->
<template>
  <ul>
    <li v-for="item in items" :key="item.id" @click="$emit('item-click', item)">
      {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

使用第三方 UI 库

如果需要更丰富的功能或样式，可以使用第三方 UI 库如 Element UI、Ant Design Vue 等。

<template>
  <el-menu :default-active="activeIndex" @select="handleSelect">
    <el-menu-item v-for="item in menuItems" :key="item.id" :index="item.id">
      {{ item.name }}
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1',
      menuItems: [
        { id: '1', name: '首页' },
        { id: '2', name: '关于我们' },
        { id: '3', name: '联系我们' }
      ]
    }
  },
  methods: {
    handleSelect(index) {
      console.log('选择了:', index)
    }
  }
}
</script>

添加样式和交互效果

可以为菜单添加样式和交互效果，如悬停高亮、选中状态等。

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

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

<style>
.menu li {
  padding: 10px;
  cursor: pointer;
}
.menu li:hover {
  background-color: #f0f0f0;
}
.menu li.active {
  background-color: #e0e0e0;
}
</style>

通过以上方法，可以根据具体需求灵活实现 Vue 中的列表菜单功能。