欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-14 10:20:40
展开效果–看红框区域 收缩效果–看红框区域   接下来看代码逻辑 ###template部分:已去除与本文不相关的功能代码
  • 展开效果–看红框区域

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

    收缩效果–看红框区域

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

    接下来看代码逻辑

    ###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) {
    	  // 功能代码省略
      }
    }
    

    ###分析过程:

    1. 分别给展开折叠的箭头加ref="arrow"属性;
    2. 分别给列表单项内容区最外层标签即本文的class="audio-body"的标签加ref=“child”;
    3. 再给箭头标签区域加个showhide(index)事件;
    4. 最后通过对应的index利用vue的ref属性改变对应的列表单项展开折叠;

    以上所述是小编给大家介绍的vue列表单项展开收缩功能之this.$refs详解整合,希望对大家有所帮助

    上一篇:

    下一篇: