Vue.js：精确控制点击LI时内部UL的显示样式-html教程-PHP中文网

Vue.js：精确控制点击LI时内部UL的显示样式

霞舞

发布： 2025-11-20 12:20:25

原创

968人浏览过

Vue.js：精确控制点击LI时内部UL的显示样式

本文详细介绍了在vue.js应用中，如何精确控制点击特定的<li>元素时，仅其内部嵌套的<ul>子菜单显示或隐藏，而非影响所有子菜单。通过为每个可切换的子菜单维护独立的响应式状态，并利用vue的动态类绑定机制，实现对ui元素的精细化控制，有效避免了全局状态管理带来的副作用。

在构建交互式前端界面时，常见的需求是实现菜单项的展开与收起功能。特别是在多级菜单结构中，当用户点击某个父级菜单项（<li>）时，我们期望只有该父级菜单项下的子菜单（<ul>）能够切换显示状态，而不是所有同级或不同级的子菜单都响应。本教程将深入探讨如何使用Vue.js的Composition API来高效、精确地实现这一功能。

问题分析

原始的问题场景中，开发者尝试使用一个单一的响应式变量 sub_menu_show 来控制所有子菜单的显示状态。这种方法的问题在于，当 sub_menu_show 的值发生变化时，所有绑定到该变量的子菜单都会同时更新状态，导致点击一个菜单项时，所有子菜单都展开或收起，这显然不符合预期。

为了实现精确控制，核心思路是为每个需要独立控制显示状态的子菜单维护一个独立的布尔值。

解决方案：独立状态管理

我们将采用一个对象来存储每个子菜单的显示状态，对象的键可以是子菜单的唯一标识符（例如，'profile' 或 'media'），值则是一个布尔类型，表示该子菜单是否处于显示状态。

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

1. HTML 结构调整

首先，我们需要修改模板，确保每个可点击的 <li> 元素能够传递一个唯一的标识符给我们的切换函数，并且每个 <ul> 子菜单能够根据其对应的独立状态来动态绑定类。

FashionLabs

AI服装模特、商品图，可商用，低价提升销量神器

查看详情

<ul>
   <li>菜单项</li>
   <li @click="() => toggleSubMenu('profile')">个人资料
      <ul :class="{ 'd-block': toggleStates['profile'] }">
          <li>历史记录</li>
      </ul>
   </li>
   <li @click="() => toggleSubMenu('media')">媒体
      <ul :class="{ 'd-block': toggleStates['media'] }">
          <li>照片</li>
          <li>视频</li>
      </ul>
   </li>
</ul>

登录后复制

关键点说明：

@click="() => toggleSubMenu('profile')"：当点击“个人资料” <li> 时，调用 toggleSubMenu 函数，并传入字符串 'profile' 作为该子菜单的唯一标识符。
:class="{ 'd-block': toggleStates['profile'] }"：这里使用Vue的动态类绑定。当 toggleStates 对象中 profile 属性的值为 true 时，d-block 类会被添加到该 <ul> 元素上；否则，该类不会被添加。d-block 通常是一个CSS类，用于将元素的 display 属性设置为 block，使其可见。

2. Vue.js 逻辑实现

接下来，我们将在Vue的 setup 函数中实现状态管理和切换逻辑。我们将使用 ref 来创建一个响应式对象，用于存储所有子菜单的独立状态。

<script>
import { ref } from 'vue'

export default {
    setup(){
        // 使用 ref 创建一个响应式对象，用于存储每个子菜单的显示状态
        // 初始时，所有子菜单都设置为隐藏 (false)
        const toggleStates = ref({ profile: false, media: false });

        /**
         * 切换指定类型子菜单的显示状态
         * @param {string} type - 子菜单的唯一标识符（如 'profile', 'media'）
         */
        const toggleSubMenu = (type) => {
            // 根据传入的 type 切换对应子菜单的状态
            // 例如，如果 toggleStates.value['profile'] 是 false，则变为 true
            toggleStates.value[type] = !toggleStates.value[type];
        }

        // setup 函数需要返回在模板中使用的响应式数据和方法
        return {
            toggleSubMenu,
            toggleStates
        }
    }
}
</script>

登录后复制

关键点说明：

import { ref } from 'vue'：从Vue中导入 ref 函数。ref 用于创建响应式数据，它可以包装任何类型的值（包括对象、数组、基本类型）。
const toggleStates = ref({ profile: false, media: false });：我们初始化了一个名为 toggleStates 的 ref，它的 .value 是一个对象。这个对象包含了我们所有子菜单的初始状态，默认为 false（隐藏）。
toggleStates.value[type] = !toggleStates.value[type];：在 toggleSubMenu 函数中，我们通过 type 参数动态访问 toggleStates.value 对象中的对应属性，并将其布尔值进行反转。请注意，当 ref 包装的是一个对象时，我们需要通过 .value 属性来访问和修改其内部的实际值。
return { toggleSubMenu, toggleStates }：setup 函数返回一个对象，其中包含了在模板中需要使用的响应式数据 (toggleStates) 和方法 (toggleSubMenu)。

3. CSS 样式（示例）

为了让 d-block 类生效，您需要在您的CSS文件中定义它：

/* style.css 或组件内部样式 */
ul ul { /* 默认子菜单隐藏 */
    display: none;
}

ul ul.d-block { /* 添加 d-block 类时显示 */
    display: block;
}

登录后复制

总结与注意事项

独立状态管理是关键： 通过为每个需要独立控制的UI元素维护其自身的响应式状态，可以避免全局状态污染，实现精确的控制。
ref 的使用： 在Vue 3 Composition API中，ref 是创建响应式变量的常用方法。当 ref 包装的是对象时，访问和修改其内部属性需要通过 .value。
动态类绑定： :class 属性可以接受一个对象，对象的键是类名，值是布尔表达式。当表达式为 true 时，类名被添加；为 false 时，类名被移除。
可扩展性： 这种方法具有很好的可扩展性。如果未来需要添加更多的子菜单，只需在 toggleStates 对象中添加新的键值对，并在HTML中相应地绑定即可，无需修改核心逻辑。
代码可读性： 明确的标识符（如 'profile', 'media'）使得代码更易于理解和维护。