<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>

关键点说明：

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。 为创作者提供AI赋能

• @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交互，确保每个组件都能按照预期独立运行。