Vue点击LI控制UL样式方法

<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')"：当点击“个人资料”
• 时，调用 toggleSubMenu 函数，并传入字符串 'profile' 作为该子菜单的唯一标识符。
• :class="{ 'd-block': toggleStates['profile'] }"：这里使用Vue的动态类绑定。当 toggleStates 对象中 profile 属性的值为 true 时，d-block 类会被添加到该
  元素上；否则，该类不会被添加。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'）使得代码更易于理解和维护。

  通过上述方法，您可以轻松地在Vue.js应用中实现复杂且精确的UI交互，确保每个组件都能按照预期独立运行。

  文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Vue点击LI控制UL样式方法》文章吧，也可关注golang学习网公众号了解相关技术文章。