如何使用Tailwind和Vue.js动态显示移动菜单？

import Vue from 'vue';
import 'tailwindcss/tailwind.css';

<template>
  <div>
    <button @click="toggleMenu" class="text-white">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
      </svg>
    </button>

    <div v-if="isMenuOpen" class="bg-gray-800 text-white">
      <!-- 移动菜单内容 -->
    </div>
  </div>
</template>

export default {
  data() {
    return {
      isMenuOpen: false
    };
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen;
    }
  }
};

<div v-if="isMenuOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 text-white transition-opacity duration-300">
  <!-- 移动菜单内容 -->
</div>

<div v-if="isMenuOpen" class="fixed top-0 left-0 w-full h-full bg-gray-800 text-white transition-opacity duration-300">
  <ul class="flex flex-col items-center justify-center h-full">
    <li><a href="#" class="text-xl font-bold">首页</a></li>
    <li><a href="#" class="text-xl font-bold">关于</a></li>
    <li><a href="#" class="text-xl font-bold">服务</a></li>
    <li><a href="#" class="text-xl font-bold">联系我们</a></li>
  </ul>
</div>