Vue3实现菜单点击显示/隐藏功能的技术咨询

问题说明 #

需要实现点击菜单按钮时切换菜单的显示与隐藏状态，基于Vue3编写代码。当前提供的代码存在逻辑错误，以下是修正后的完整实现方案：

错误代码示例 #

JavaScript 部分

const openMenu = () => {
    showMenuContent: {
        type: Boolean
        required: true,
        default: false,
    }
}

HTML 部分

<a class="" @click="openMenu()">Menu</a>

<div v-if="showMenuContent(true)">Menu-div</div>

修正后的实现 #

核心逻辑 #

利用Vue3的ref创建响应式变量控制菜单状态，点击按钮时切换该变量的布尔值。

完整代码（Script Setup 语法） #

<template>
  <!-- 菜单触发按钮 -->
  <a @click="toggleMenu" class="menu-trigger">Menu</a>
  
  <!-- 菜单内容：根据isMenuOpen状态显示/隐藏 -->
  <div v-if="isMenuOpen" class="menu-container">Menu-div</div>
</template>

<script setup>
// 导入Vue3的ref方法创建响应式变量
import { ref } from 'vue'

// 初始化菜单状态为隐藏
const isMenuOpen = ref(false)

// 切换菜单显示状态的函数
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value
}
</script>

<style scoped>
/* 可选：添加基础样式美化 */
.menu-trigger {
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.menu-container {
  margin-top: 10px;
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 4px;
}
</style>

关键修正点 #

• 原代码错误地在函数内定义props格式的对象，Vue3中需用ref创建响应式状态变量
• v-if指令应直接绑定响应式变量，而非调用函数传参
• 点击事件触发的函数需切换状态变量的值，而非定义变量结构

内容的提问来源于stack exchange，提问作者rvvds