vue列表单项展开收缩功能之this.$refs的详解

2019-11-19 11:39:05

字体：大中小

来源：转载

供稿：网友

展开效果看红框区域

收缩效果看红框区域

接下来看代码逻辑

###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"></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"></i>      </p>      <span class="body-l-name">{{item.fileName}}</span>    </div>    <div class="body-r">      <i class="iconfont" @click="deletCourseSub(item.id)"></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) {	  // 功能代码省略  }}

###分析过程：