Question

我是Vue和Nuxtjs的新手，但是我试图在屏幕顶部制作一个菜单栏，该菜单栏消失，并且在选项卡较小且菜单不显示时用“汉堡”按钮代替适合整个屏幕。

到目前为止，我已经实现了这一目标，唯一的问题是，当我单击“汉堡”按钮时，菜单项没有显示。我该如何实现？

<template>
  <div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <div class="flex items-center">
          <div class="hidden md:block">
            <div class="ml-10 flex items-baseline">
              <a
                href="/product"
                class="font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Product
              </a>
              <a
                href="/linkone"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Title One
              </a>
              <a
                href="/linktwo"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >Title Two
              </a>
              <!--              <a-->
              <!--                href="/pricing"-->
              <!--                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"-->
              <!--                >Pricing-->
              <!--              </a>-->
              <a
                href="/about"
                class="ml-10 font-medium text-gray-500 hover:text-gray-900 transition duration-150 ease-in-out"
                >About
              </a>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex md:hidden">
          <!-- Mobile menu button -->
          <button
            type="button"
            class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out"
            id="main-menu"
            aria-label="Main menu"
            aria-haspopup="true"
          >
            <!-- Menu open: "hidden", Menu closed: "block" -->
            <svg
              class="block h-6 w-6"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
            <!-- Menu open: "block", Menu closed: "hidden" -->
            <svg
              class="hidden h-6 w-6"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!--
      Mobile menu, toggle classes based on menu state.

      Open: "block", closed: "hidden"
    -->
    <div class="hidden md:hidden">
      <div class="px-2 pt-2 pb-3 sm:px-3">
        <a
          href="#"
          class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700"
          >Product</a
        >
        <a
          href="#"
          class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
          >Title One</a
        >
        <a
          href="#"
          class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
          >Title Two</a
        >
        <a
          href="#"
          class="mt-1 block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700"
          >About</a
        >
      </div>
    </div>
  </div>
</template>

Answer 1

您可以通过数据中的状态变量以及将类动态绑定到元素来实现此目的

// component
data() {
   return {
     isOpen: false
   }
}

<!-- template -->
<button @click="isOpen = !isOpen">Toggle</button>
<div 
  class="menu"
  :class="{hidden: !isOpen}"
>
  ...
</div>

如果条件（设置为对象值）为true，则设置隐藏类。

汉堡按钮菜单不出现

1 个答案: