vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)
效果图:
默认显示最新一条数据:

点击显示所有数据:

代码:

说明:这里主要是
这块用来控制显示或者隐藏
根据当前点击的
这个方法里传递的index 对应 isShow 数组里的index ,对应起来后,取到数组里的true/false值,控制列表的显示和隐藏

说明:isShow这个数组就是添加所有显示隐藏状态的数组
detailList是列表集合
(以下说明,写一块方便看)
说明:下面的
这个就是格局取到的所有列表集合个数,为isShow数组里添加对应的控制显示隐藏的false值。
changeState这个方法就是根据当前点击的那一条数据,改变isShow数组里对应的值,对应的就展开了列表集合。

注意:这个数组isShow必须使用splic改变自身的值,如果直接赋值改变,vue页面的值不能对应的更新(也就是vue页面拿不到改变后的值)。
splic(当前要改变的数组的下标,改变的个数,要改为什么值)
vue实现两重列表集合,点击显示,点击隐藏的折叠效果,(默认显示集合最新一条数据,点击展开,显示集合所有数据)的更多相关文章
- vue v-nav指令属性列表
v-nav指令属性列表 属性名 属性描述 类型 必选 默认 title 导航栏标题 String No 空字符串 showBackButton 是否显示(左边的)返回按钮 Boolean No fal ...
- Vue.js 多选列表(Multi-Select)组件
搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...
- Axure的中继器如何实现两个列表之间的交互
Axure RP 8安装包+注册码+中文语言包下载地址如下: 链接: https://pan.baidu.com/s/1nwRnCUl 密码: yy36 将中文语言包下的lang文件夹直接放在安装Ax ...
- [Swift]LeetCode599. 两个列表的最小索引总和 | Minimum Index Sum of Two Lists
Suppose Andy and Doris want to choose a restaurant for dinner, and they both have a list of favorite ...
- VUE的两种跳转push和replace对比区别
router.push(location) 在vue.js中想要跳转到不同的 URL,需要使用 router.push 方法. 这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按 ...
- Vue(8)列表渲染v-for
循环 在模板中可以用v-for指令来循环数组,对象等. 循环数组 我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items形式的特殊语法,其中 it ...
- 9月23日JavaScript作业----两个列表之间移动数据
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- Bash实用技巧:同时循环两个列表
摘要: 你会学到一种原创的同时循环两个列表的方法.类似于Python或者Haskell的zip函数,非常简洁直观,效果如下: $ paste <( ) <( ) | while read ...
- python比较两个列表
两个列表,随机产生4个不相等的数,计算一下,相同位置上的元素相等的个数,用k1表示. b列表中的元素在a列表中,但位置不相同,有多少个,用k2表示. 例如: a=[0, 4, 7, 3]b=[7, 1 ...
随机推荐
- Android获取SD卡路径及SDCard内存的方法
这篇文章主要介绍了Android获取SD卡路径及SDCard内存的方法,较为详细的分析了Android针对SD卡操作所涉及的类及其具体函数功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了A ...
- 直接拿去用!每个App都会用到的LoadingLayout
前言 项目里都会遇到几种页面,分别为加载中.无网络.无数据.出错四种情况,经常要使用,所以封成库引用了,方便使用,顺便分享出来.先看一下效果: 原理比较简单,继承FrameLayout,在xml渲染完 ...
- android入门学习-天气预报app(一)
引言 学习<android第一行代码>根据书本开发的天气预报app,主要用于熟练操作android开发(android studio3.0平台). 今天主要分享一下从服务器上获取天气信息, ...
- local_listener参数的作用!
转自:http://warehouse.itpub.net/post/777/472788 pmon只会动态注册port等于1521的监听,否则pmon不能动态注册listener,要想让pmon动态 ...
- linux(centos7)下SVN服务器搭建手札
linux(centos)下SVN服务器如何搭建?说到SVN服务器,想必大家都知道,可以是在LINUX下如何搭建SVN服务器呢?那么今天给大家分享一下linux(centos)搭建SVN服务器的思路! ...
- 分享:Windows2008重启后提示系统恢复选项的解决办法
如题:WINdows2008服务器. 重启后提示系统恢复选项的解决办法 使用windows 2008后,不能启动的问题,重启后出现 修复系统选项 采用下面帖子中的部分命令搞定之. 我自己是直接使用:选 ...
- 使用 PowerShell 创建 Linux 虚拟机
Azure PowerShell 模块用于从 PowerShell 命令行或脚本创建和管理 Azure 资源. 本指南详细介绍了如何使用 Azure PowerShell 模块部署运行 Ubuntu ...
- 第八章 SQL高级处理 8-2 GROUPING运算符
一.同时得到合计行 合计行是不指定聚合键时得到的汇总结果. UNION ALL与UNION的不同之处是它不会对结果进行排序,因此比UNION性能更好. 二.ROLLUP——同时得出合计和小计 GR ...
- 外键应用(foreignkey)、多对多
1.创建model: 定义hv表,保存hv server infors: 定义vm表,保存vm infors: 一个vm只能对应一台hv server:一台hv server可以包含有多台vm cla ...
- 解决win 和 ubuntu 虚拟机之间 无法 复制粘贴的问题,以及重装vmtool后,还是无法解决的办法
第一步:重新安装vmware-tool 我这里已经装过了,所以显示这个,不然应该是显示:安装 VMware Tools 它会打开一个文件夹,把压缩包复制到任一个地方解压,执行.pl的那个文件:sudo ...