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

展开效果�C看红框区域

vue列表单项展开收缩功能之this.$refs的详解_第1张图片

收缩效果�C看红框区域

 vue列表单项展开收缩功能之this.$refs的详解_第2张图片

接下来看代码逻辑

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

  • {{index+1}} {{item.subName}}

    {{item.fileName}}
  • ###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详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    你可能感兴趣的:(vue列表单项展开收缩功能之this.$refs的详解)