vue实现横排菜单

Vue 实现横排菜单的方法

使用 display: flex 布局

在 Vue 组件的样式中，通过 display: flex 实现横排菜单布局。flex-direction 默认为 row，因此可以直接使用。

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

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

<style scoped>
.menu-container {
  display: flex;
  gap: 20px; /* 设置菜单项之间的间距 */
  padding: 10px;
  background-color: #f0f0f0;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
}
</style>

使用 ul 和 li 标签

结合语义化标签 ul 和 li，通过 CSS 将列表项横向排列。

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

<style scoped>
.horizontal-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.horizontal-menu li {
  margin-right: 15px;
}

.horizontal-menu li a {
  text-decoration: none;
  color: #333;
}
</style>

使用 Vue Router 实现导航菜单

如果菜单需要路由跳转，可以结合 Vue Router 实现。

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

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

<style scoped>
nav {
  display: flex;
  gap: 20px;
  padding: 10px;
}

.menu-link {
  text-decoration: none;
  color: #333;
}

.menu-link.router-link-active {
  color: #42b983;
  font-weight: bold;
}
</style>

响应式横排菜单

通过媒体查询实现响应式布局，在小屏幕设备上调整为垂直菜单。

.menu-container {
  display: flex;
  gap: 20px;
}

@media (max-width: 768px) {
  .menu-container {
    flex-direction: column;
    gap: 10px;
  }
}

动态高亮当前菜单项

通过 Vue 的响应式数据动态高亮当前选中的菜单项。

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

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

<style scoped>
.active {
  color: #42b983;
  font-weight: bold;
}
</style>