Vue.js 中实现独立子菜单的动态样式切换-html教程-PHP中文网

Vue.js 中实现独立子菜单的动态样式切换

碧海醫心

发布： 2025-11-21 12:00:53

原创

523人浏览过

vue.js 中实现独立子菜单的动态样式切换

本文将详细介绍在 Vue.js 应用中如何实现点击父级 `

` 元素时，仅切换其内部特定 `

理解问题：单一状态管理的局限性

在 Vue.js 开发中，一个常见的需求是当用户点击某个菜单项时，显示或隐藏其对应的子菜单。然而，如果所有子菜单都绑定到同一个响应式状态变量，就会出现一个问题：点击任何一个父级菜单项，所有子菜单都会同时显示或隐藏。

考虑以下初始代码示例：

HTML 结构：

立即学习“前端免费学习笔记（深入）”；

<ul>
   <li>Menu</li>
   <li @click="toggleSubMenu">Profile
      <ul> <!-- 期望在这里添加类 -->
          <li>History</li>
      </ul>
   </li>
   <li @click="toggleSubMenu">Media
      <ul :class="{ 'd-block' : data.sub_menu_show}">
          <li>Photos</li>
          <li>Videos</li>
      </ul>
   </li>
</ul>

登录后复制

Vue JavaScript (Composition API):

<script>
import { reactive } from 'vue'

export default {
    setup(){
        const data = reactive({
            sub_menu_show: '', // 单一状态
        });

        const toggleSubMenu = () => {
            data.sub_menu_show = !data.sub_menu_show // 切换这个单一状态
        }

        return{
            data,
            toggleSubMenu
        }
    }
}
</script>

登录后复制

在这个例子中，data.sub_menu_show 是一个布尔值，用于控制子菜单的显示状态。当 toggleSubMenu 方法被调用时，它会反转 data.sub_menu_show 的值。由于所有子菜单都可能（或被期望）绑定到这个单一状态，结果是点击“Profile”或“Media”时，所有子菜单都会同时被切换，这显然不符合“仅切换点击的子菜单”的需求。

解决方案：独立状态管理与唯一标识符

要实现独立子菜单的切换，核心思想是为每个可切换的子菜单维护一个独立的响应式状态。这意味着我们需要一个数据结构来存储每个子菜单的开启/关闭状态，并且在事件触发时，只更新对应子菜单的状态。

我们将使用 Vue 3 的 Composition API 来实现这一目标。

1. 状态设计

我们可以使用一个对象来存储每个子菜单的独立状态，其中对象的键作为子菜单的唯一标识符，值则表示其当前的显示状态（例如 true 为显示，false 为隐藏）。

360智图

AI驱动的图片版权查询平台

143

查看详情

import { ref } from 'vue'

const toggleStates = ref({
    profile: false, // Profile 子菜单的独立状态
    media: false    // Media 子菜单的独立状态
});

登录后复制

这里使用 ref 来包裹整个 toggleStates 对象，因为我们可能会修改其内部的属性。

2. 事件处理器的优化

toggleSubMenu 方法现在需要接收一个参数，这个参数就是我们为子菜单定义的唯一标识符。通过这个标识符，我们可以精确地更新对应子菜单的状态。

const toggleSubMenu = (type) => {
    // 根据传入的type更新对应子菜单的状态
    toggleStates.value[type] = !toggleStates.value[type];
}

登录后复制

3. HTML 结构的调整

在 HTML 中，我们需要做两处调整：

事件绑定： 在每个 <li> 元素的 @click 事件中，调用 toggleSubMenu 方法并传入该子菜单的唯一标识符。
类绑定： 每个 <ul> 元素应绑定到 toggleStates 对象中对应标识符的状态。

优化后的 HTML 结构：

<ul>
   <li>Menu</li>
   <li @click="() => toggleSubMenu('profile')">Profile
      <ul :class="{ 'd-block': toggleStates['profile'] }">
          <li>History</li>
      </ul>
   </li>
   <li @click="() => toggleSubMenu('media')">Media
      <ul :class="{ 'd-block': toggleStates['media'] }">
          <li>Photos</li>
          <li>Videos</li>
      </ul>
   </li>
</ul>

登录后复制

请注意，@click="() => toggleSubMenu('profile')" 这种写法是为了确保 toggleSubMenu('profile') 在点击时才执行，而不是在渲染时立即执行。

4. 完整的 Vue.js 代码

结合上述修改，完整的 Vue.js 组件代码如下：

<script>
import { ref } from 'vue' // 导入 ref

export default {
    setup(){
        // 使用 ref 创建一个响应式对象，存储每个子菜单的独立状态
        const toggleStates = ref({
            profile: false, // 'profile' 子菜单的初始状态为隐藏
            media: false    // 'media' 子菜单的初始状态为隐藏
        });

        // 定义切换子菜单状态的方法
        const toggleSubMenu = (type) => {
            // 根据传入的唯一标识符 'type'，切换对应子菜单的状态
            toggleStates.value[type] = !toggleStates.value[type];
        }

        return {
            toggleSubMenu, // 暴露给模板使用
            toggleStates   // 暴露给模板使用
        }
    }
}
</script>

登录后复制

样式定义 (CSS)

为了使 :class="{ 'd-block': ... }" 生效，你需要在 CSS 中定义 d-block 类，例如：

.d-block {
    display: block !important; /* 或者其他你想要的显示样式 */
}

/* 默认隐藏子菜单 */
ul ul {
    display: none;
}

登录后复制

确保你的 CSS 规则能够正确地显示或隐藏子菜单。

总结与注意事项

独立状态是关键： 实现独立 UI 组件行为的核心在于为每个组件维护其自身的响应式状态。避免使用全局单一状态来控制多个独立组件。
唯一标识符： 为每个可切换的子菜单提供一个唯一的标识符（如字符串），这使得在事件处理中能够精确地定位和修改目标状态。
可扩展性： 这种模式具有很好的可扩展性。如果你有更多的子菜单，只需在 toggleStates 对象中添加新的键值对即可，无需修改 toggleSubMenu 函数的逻辑。
代码清晰度： 通过这种方式，代码的意图更加明确，每个子菜单的行为都是独立的，降低了组件之间的耦合度，提高了可维护性。
ref vs reactive： 在这里使用 ref 包装整个 toggleStates 对象是可行的，因为它允许我们直接通过 toggleStates.value[type] 来修改内部属性。如果 toggleStates 是一个 reactive 对象，你可以直接修改 toggleStates[type]，但 ref 在处理更复杂的对象替换或与模板绑定时通常更灵活。