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


Posted in Javascript onMay 05, 2019

展开效果?看红框区域

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详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 获取浏览器版本
Jan 21 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 Javascript
详解angular2实现ng2-router 路由和嵌套路由
Mar 24 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 #Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 #Javascript
Vue 中如何正确引入第三方模块的方法步骤
May 05 #Javascript
详解vue的双向绑定原理及实现
May 05 #Javascript
Vue+Express实现登录注销功能的实例代码
May 05 #Javascript
Vue 递归多级菜单的实例代码
May 05 #Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 #Javascript
You might like
十天学会php之第七天
2006/10/09 PHP
php AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
php smarty的预保留变量总结
2008/12/04 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
简介alert()与console.log()的不同
2015/08/26 Javascript
jquery实现表格隔行换色效果
2015/11/19 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python连接mongodb密码认证实例
2018/10/16 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
大客户销售经理职责
2013/12/04 职场文书
社区七一党员活动方案
2014/01/25 职场文书
加拿大留学自荐信
2014/01/28 职场文书
倡导文明标语
2014/06/16 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
圣诞节开幕词
2015/01/29 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015年新农合工作总结
2015/03/30 职场文书
离职证明格式样本
2015/06/12 职场文书
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
理解python中装饰器的作用
2021/07/21 Python