vue列表单项展开收缩功能怎么实现

这篇文章主要讲解了“vue列表单项展开收缩功能怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue列表单项展开收缩功能怎么实现”吧！

代码逻辑

###template部分：已去除与本文不相关的功能代码

<li class="main-video"v-for="(item, index) of courseSubList" :key="item.id">  <div class="audio-name">    <div class="img-l">      <span class="img-l-num">{{index+1}}</span>      <span class="img-l-name">{{item.subName}}</span>    </div>    <div class="img-r" @click="showHide(index)" ref="arrow">      <i class="iconfont">&#xe606;</i>    </div>  </div>  <div class="audio-body" ref="child">    <div class="body-l">      <p class="body-l-num body-l-num-video">        <i class="iconfont">&#xe62e;</i>      </p>      <span class="body-l-name">{{item.fileName}}</span>    </div>    <div class="body-r">      <i class="iconfont" @click="deletCourseSub(item.id)">&#xe62c;</i>    </div>  </div></li>

###js部分：已去除与本文不相关的功能代码

data() {return {courseSubList: [], // 课程正文列表}},methods: {  showHide(index) {   if (this.$refs.child[index].style.display === 'none') {    this.$refs.child[index].style.display = 'flex'    this.$refs.arrow[index].style.transform = 'rotateX(0deg)'   } else {    this.$refs.child[index].style.display = 'none'    this.$refs.arrow[index].style.transform = 'rotateX(180deg)'   }  },  deletCourseSub(id) {  // 功能代码省略  }}

vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架，Vue与其它大型框架的区别是，使用Vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

感谢各位的阅读，以上就是“vue列表单项展开收缩功能怎么实现”的内容了，经过本文的学习后，相信大家对vue列表单项展开收缩功能怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！