MPVUE 点击LI列表如何显示子元素内容

Question

问题描述

如何实现点击列表显示列表li子元素内容

问题出现的环境背景及自己尝试过哪些方法

自己想的很槽的办法就是给每一个li写一个点击事件，绑定各自的变量，通过:class="show：ishow"这种控制，点那个显示那个（真不想这么干），另外考虑就是列表是用v-for渲染的话，这个笨办法就不得行了...

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<li @click="show">

<span>菜单1</span>
<div :class="show:isshow">
    <li>子菜单</li>
    <li>子菜单</li>
    <li>子菜单</li>
</div>

</li>
<li @click="show">

<span>菜单2</span>
<div :class="show:isshow">
    <li>子菜单</li>
    <li>子菜单</li>
    <li>子菜单</li>
</div>

</li>
<li @click="show">

<span>菜单3</span>
<div :class="show:isshow">
    <li>子菜单</li>
    <li>子菜单</li>
    <li>子菜单</li>
</div>

</li>

export default {
data () {

return:{
    isshow: false
}

},
methods:{

 show(){
     const that=this
     if(!that.isshow){
         that.isshow = true
     }else{
         that.isshow =false
     }
 }

}
}

你期待的结果是什么？实际看到的错误信息又是什么？

期待点那个菜单就显示哪个子菜单，目前不知道怎么写控制，上面代码是点一个全显示了
还有如果是v-for渲染的列表呢？
<li v-for="(tabbar,index) in tabbars" :key="index" @click="show()">

<span>{{tabbar.name}}</span>
<div :class="show:isshow">
    <!--子菜单列表-->
</div>

</li>
如果是这样的该怎么做事件控制？看了好久MPVUE文档和vue文档了，一直摸不透~望大佬们指点下

Answer 1

<div :class="{show:isshow}" v-if="thisindex == index"></div>点击传入索引值，通过v-if判断索引值是否相等进行显示，效果是实现了，但感觉还不清晰