UniApp 点击一级标题展开二级菜单 - Vue 条件渲染实现

<template>
  <view>
    <view @click="toggleMenu">{{ isShow ? '收起菜单' : '展开菜单' }}</view>
    <view v-show="isShow">
      <!-- 二级菜单内容 -->
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isShow: false // 初始化二级菜单默认不展开
    }
  },
  methods: {
    toggleMenu() {
      this.isShow = !this.isShow // 点击一级标题时切换二级菜单的展开与收起状态
    }
  }
}
</script>
<p>在 UniApp 中，可以使用 Vue 的条件渲染指令 v-if 或 v-show 来实现点击一级标题后展开二级菜单的效果。</p>
<p>首先，在一级标题的点击事件中，可以使用 Vue 的数据绑定来控制二级菜单的显示与隐藏。例如，在 data 中定义一个变量 isShow 来表示二级菜单是否展开：</p>
<p>在上述代码中，一级标题的点击事件 toggleMenu 会切换 isShow 的值，从而根据 isShow 的值来决定是否展示二级菜单。</p>
<p>需要注意的是，v-if 会在条件为 false 时完全销毁并重新创建 DOM 元素，而 v-show 只是通过 CSS 的 display 属性来控制元素的显示与隐藏。在大部分情况下，推荐使用 v-show 来实现这种效果，因为它的性能更好。</p>