vue 简单菜单实现

实现简单菜单的步骤

在Vue中实现一个简单的菜单，可以通过以下方法完成：

模板部分

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isMenuOpen">
      <li v-for="item in menuItems" :key="item.id">
        <a :href="item.link">{{ item.text }}</a>
      </li>
    </ul>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      menuItems: [
        { id: 1, text: 'Home', link: '/' },
        { id: 2, text: 'About', link: '/about' },
        { id: 3, text: 'Contact', link: '/contact' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

样式部分

<style scoped>
ul {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

li {
  padding: 8px 0;
}

a {
  text-decoration: none;
  color: #333;
}

a:hover {
  color: #42b983;
}
</style>

使用Vue Router实现导航菜单

如果需要实现导航功能，可以结合Vue Router：

修改模板部分

<template>
  <div>
    <button @click="toggleMenu">Toggle Menu</button>
    <ul v-show="isMenuOpen">
      <li v-for="item in menuItems" :key="item.id">
        <router-link :to="item.link">{{ item.text }}</router-link>
      </li>
    </ul>
  </div>
</template>

修改数据部分

menuItems: [
  { id: 1, text: 'Home', link: '/' },
  { id: 2, text: 'About', link: '/about' },
  { id: 3, text: 'Contact', link: '/contact' }
]

添加过渡动画效果

可以为菜单添加平滑的显示/隐藏动画：

修改模板

<transition name="fade">
  <ul v-show="isMenuOpen">
    <!-- 菜单项 -->
  </ul>
</transition>

添加CSS过渡样式

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

响应式菜单实现

对于移动端友好的响应式菜单，可以添加媒体查询：

@media (max-width: 768px) {
  ul {
    position: absolute;
    background: white;
    width: 100%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
}