vue2自定义下拉导航栏与从vue3自定义下拉导航栏

*初级小白*~

已于 2022-04-26 10:14:50 修改

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-04-25 15:22:02 首次发布

本文链接：https://blog.csdn.net/ScumStudy/article/details/124406206

版权

本文介绍了如何在Vue2和Vue3中分别实现自定义下拉导航栏的功能，详细阐述了两种不同版本的实现步骤和关键代码，帮助开发者理解在不同版本的Vue中进行组件化的导航栏设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

vue2写法

<template>
  <div class="header">
    <ul>
      <!-- 循环数据在点击调用changeli方法时将当前索引和本条数据传进去,并使用当前数据show的bool值添加或移除样式 -->
      <li :class="[{ active: item.show }]" @click="changeli(index, item)" v-for="(item, index) in global">
        <!-- 在这里打印出boll值方便查看 -->
        {
  { item.name }}{
  { item.show }}
        <!-- {
  { item.name }} -->
        <!-- 判断当前这条数据的bool值如果是true就打开二级菜单,如果是false就关闭二级菜单 -->
        <ul v-show="item.show">
          <!-- 循环二级菜单数据并使用.stop阻止冒泡 -->
          <li v-for="(a, index) in item.children" v-on:click.stop="doThis(index)">{
  { a.name }}</li>
        </ul>

      </li>
    </ul>
  </div>
</template&