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

Question

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

     <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>

Answer 1

使用v-if指令：

将 v-if 添加到您的组件和一些条件，这些条件将根据您当前需要显示的内容切换下拉菜单。喜欢这些：

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

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

How to organise different dropdowns in vue

vue.js

vuejs2

filepond