vue中,在循环中操作事件,如何控制元素展示隐藏

 <template>
    <div>
        <div class="firstLeverContainer" v-for="menu in menus">
            <div class="firstLever close" @click="openOrLoadChild(menu)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>

比如:我点击第一元素,所有的secondAllLeverContainer都展开了,因为isShow是全局的,如何做,才能只执行当前循环体的中的事件呢

看你需要的效果是什么的,1L的办法可以实现每一项的显示和隐藏的切换,就是可以同时显示多项,点击的时候只要把对应的isShow取反就可以;
如果是每次只显示一项的话,就可以直接定义一个全局变量记录当前显示项的下标或者数组中的ID等唯一性的标识

 <template>
    <div>
        <div class="firstLeverContainer" v-for="menu,index in menus">
            <div class="firstLever close" @click="openOrLoadChild(index)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow===index}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>

openOrLoadChild(index){
    this.isShow=index
}

menus 是一个列表对吧 ,

//给menus 列表中的每一个元素添加一个额外的属性值,isShow
menus = this.map(menu=>{
    menu.isShow = false;
        return menu;
}) 

            <div class="secondAllLeverContainer" v-bind:class="{isShow:isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>

                        //改为  isShow -->menu.isShow  既可

                        <div class="secondAllLeverContainer" v-bind:class="{isShow:menu.isShow}">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
 <template>
    <div>
        <div class="firstLeverContainer" v-for="(menu,index) in menus">
            <div class="firstLever close" @click="openOrLoadChild(menu,index)">
                <span class="title">{{menu.menuName}}</span>
                <span class="drop">
                    <i class="fa fa-angle-down"></i>
                </span>
            </div>
            <div class="secondAllLeverContainer" style="display:none;">
                <child-menu v-for="childMenu in childMenus"></child-menu>
            </div>
        </div>
    </div>
</template>


openOrLoadChild: function(menu,index) {
        let sub_menu = this.$el.querySelectorAll('.secondAllLeverContainer');
        for(let j = 0,len=sub_menu.length; j < len; j++) {
          if(index == j) {
            if(sub_menu[j].style.display == "none") {
              sub_menu[j].style.display = "block";
            } else {
              sub_menu[j].style.display = "none";
            }
          } else if(sub_menu[j].style.display == "block")  {
            sub_menu[j].style.display = "none";
          }
        }
      },