Vue多个元素展开收起

html:

<div class="helpPages_main">
   <div class="read" v-for="(item, index) in helpList" @click="showToggle(item)" :key="index">
     <div class="header rela">
       <h3>{{item.title}}</h3>
          <i class="down abso fa fa-angle-down" v-if="!item.isopen"></i>
     </div>
     <ul v-for="(v, i) in item.ques" :key="i" v-show="item.isSubShow">
       <li class="rela" @click="toDetail(v.nameType)">
            <i class="fl abso"></i>
            <p class="fl">{{v.name}}</p>
        </li>
     </ul>
    </div>
</div>

vue.js:

methods: {
   showToggle(item) {
        item.isSubShow = !item.isSubShow //需要展开内容，显示与隐藏之间切换
        item.isopen = !item.isopen //右侧图标根据内容隐藏或显示进行相应显示
    },
   toDetail(item) {
        this.$router.push('/helpDetails/' + item)
      },
},

 

转载于:https://www.cnblogs.com/yuanxinru321/p/9766223.html