vue中如何组织不同的下拉菜单

如何解决vue中如何组织不同的下拉菜单

我在我的项目中使用 VUE，我真的不知道如何处理不同的下拉列表。例如，我有 3 个不同的下拉列表，我需要通过添加活动 css 类来显示它们，这里没有问题。但是如何管理它们的可见性并分别为每个下拉列表更改它，因为同时只能看到一个下拉列表？我试过用插槽来做它，但它并没有阻止我。有人可以帮助我吗？我的代码：

     <div class="account-settings-quickview">
        <span class="icon-settings">
          <i class="fas fa-cog"></i>
          <!-- SVG ARROW -->
          <svg class="svg-arrow">
          <use xlink:href="#svg-arrow"></use>
          </svg>
          <!-- /SVG ARROW -->
        </span>

        <!-- PIN -->
        <span class="pin soft-edged primary">49</span>
        <!-- /PIN -->

        <!-- DROPDOWN NOTIFICATIONS -->
        <ul class="dropdown notifications no-hover">
       
        </ul>
        <!-- /DROPDOWN NOTIFICATIONS -->
      </div>

解决方法

使用 v-if 指令：

将 v-if 添加到您的组件和一些条件，这些条件会根据您当前需要显示的内容切换下拉列表。像这样：

<dropdown1 v-if="somecondition=='A'"></dropdown>
<dropdown2 v-else-if="somecondition=='B'"></dropdown>
<dropdown3 v-else></dropdown>