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 相关文章推荐
jQuery 获取对象 基本选择与层级
May 31 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
不同的jQuery API来处理不同的浏览器事件
Dec 09 Javascript
jQuery实现带水平滑杆的焦点图动画插件
Mar 08 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
原生JS实现的轮播图功能详解
Aug 06 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
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
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
AutoSave/自动存储功能实现
2007/03/24 Javascript
javascript 表格内容排序 简单操作示例代码
2014/01/03 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
使用tensorflow实现AlexNet
2017/11/20 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
golang/python实现归并排序实例代码
2020/08/30 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
你所知道的集合类都有哪些?主要方法?
2012/12/31 面试题
护士自我评价
2014/02/01 职场文书
家长对孩子的评语
2014/04/18 职场文书
小学节能减排倡议书
2014/05/15 职场文书
员工合理化建议书
2014/05/19 职场文书
社区春季防火方案
2014/06/02 职场文书
银行金融服务方案
2014/06/11 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js