Vue.js 分类导航实现 - 带下拉菜单效果

<template>
  <div class='nav'>
    <div v-for='category in categories' :key='category.id' class='nav-item'>
      <span class='nav-text'>{{ category.name }}</span>
      <ul class='nav-sub'>
        <li v-for='subCategory in category.subCategories' :key='subCategory.id' class='nav-sub-item'>
          <a :href='subCategory.link'>{{ subCategory.name }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      categories: [
        {
          id: 1,
          name: '分类1',
          subCategories: [
            {
              id: 1,
              name: '子分类1',
              link: '#'
            },
            {
              id: 2,
              name: '子分类2',
              link: '#'
            }
          ]
        },
        {
          id: 2,
          name: '分类2',
          subCategories: [
            {
              id: 3,
              name: '子分类3',
              link: '#'
            },
            {
              id: 4,
              name: '子分类4',
              link: '#'
            }
          ]
        }
      ]
    }
  }
}
</script>
<style>
.nav {
  display: flex;
  justify-content: space-between;
}

.nav-item {
  position: relative;
}

.nav-text {
  cursor: pointer;
}

.nav-sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  background-color: #fff;
  border: 1px solid #ccc;
}

.nav-item:hover .nav-sub {
  display: block;
}

.nav-sub-item {
  padding: 10px;
}

.nav-sub-item a {
  text-decoration: none;
  color: #333;
}

.nav-sub-item a:hover {
  color: #0077c0;
}
</style>
<p>在这个示例中，我们定义了一个 <code>categories</code> 数组，其中包含两个分类，每个分类都有多个子分类。我们使用 <code>v-for</code> 指令来循环渲染每个分类和子分类，并使用动态绑定 <code>href</code> 属性来设置子分类链接。</p>
<p>为了实现子分类的下拉菜单效果，我们使用 CSS 中的绝对定位和 <code>display: none</code> 属性来隐藏子分类，然后在鼠标悬停在分类上时使用 CSS 中的 <code>:hover</code> 伪类来显示子分类。</p>