效果图:

  默认显示最新一条数据:

  点击显示所有数据:

代码:

    

    说明:这里主要是 这块用来控制显示或者隐藏

       根据当前点击的  这个方法里传递的index 对应  isShow 数组里的index  ,对应起来后,取到数组里的true/false值,控制列表的显示和隐藏

    

    说明:isShow这个数组就是添加所有显示隐藏状态的数组

       detailList是列表集合

    (以下说明,写一块方便看)

    说明:下面的这个就是格局取到的所有列表集合个数,为isShow数组里添加对应的控制显示隐藏的false值。

        changeState这个方法就是根据当前点击的那一条数据,改变isShow数组里对应的值,对应的就展开了列表集合。

    

    注意:这个数组isShow必须使用splic改变自身的值,如果直接赋值改变,vue页面的值不能对应的更新(也就是vue页面拿不到改变后的值)。

    splic(当前要改变的数组的下标,改变的个数,要改为什么值)

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

  1. vue v-nav指令属性列表

    v-nav指令属性列表 属性名 属性描述 类型 必选 默认 title 导航栏标题 String No 空字符串 showBackButton 是否显示(左边的)返回按钮 Boolean No fal ...

  2. Vue.js 多选列表(Multi-Select)组件

    搬运公众号早前文章 多选列表 (Multi-Select) 是一种将所有选项列出,并允许用户利用 Ctrl/Shift 键进行多选的 UI 元素.这是一种常见的设计元素.有时候为了节省空间,我们会将选 ...

  3. Axure的中继器如何实现两个列表之间的交互

    Axure RP 8安装包+注册码+中文语言包下载地址如下: 链接: https://pan.baidu.com/s/1nwRnCUl 密码: yy36 将中文语言包下的lang文件夹直接放在安装Ax ...

  4. [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 ...

  5. VUE的两种跳转push和replace对比区别

    router.push(location) 在vue.js中想要跳转到不同的 URL,需要使用 router.push 方法. 这个方法会向 history 栈添加一个新的记录,当用户点击浏览器后退按 ...

  6. Vue(8)列表渲染v-for

    循环 在模板中可以用v-for指令来循环数组,对象等. 循环数组 我们可以用 v-for 指令基于一个数组来渲染一个列表.v-for 指令需要使用 item in items形式的特殊语法,其中 it ...

  7. 9月23日JavaScript作业----两个列表之间移动数据

    作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...

  8. Bash实用技巧:同时循环两个列表

    摘要: 你会学到一种原创的同时循环两个列表的方法.类似于Python或者Haskell的zip函数,非常简洁直观,效果如下: $ paste <( ) <( ) | while read ...

  9. python比较两个列表

    两个列表,随机产生4个不相等的数,计算一下,相同位置上的元素相等的个数,用k1表示. b列表中的元素在a列表中,但位置不相同,有多少个,用k2表示. 例如: a=[0, 4, 7, 3]b=[7, 1 ...

随机推荐

  1. 卷积神经网络(CNN)在语音识别中的应用

    前言 总结目前语音识别的发展现状,dnn.rnn/lstm和cnn算是语音识别中几个比较主流的方向.2012年,微软邓力和俞栋老师将前馈神经网络FFDNN(Feed Forward Deep Neur ...

  2. flutter圆角效果的实现

    new Material( borderRadius: BorderRadius.circular(20.0), shadowColor: Colors.blue.shade200, elevatio ...

  3. oracle 导入导出 dmp 的三种方式

    1.命令行参数 比如:exp scott/tiger@orcl tables=emp file=D:\test.dmp 2.交互提示符 比如:C:\Users\Administrator>exp ...

  4. c 字符串替换字符

    使用完释放记得内存free(str),防止内存泄露 char * replace (const char *str, const char *src, const char *dst){ const ...

  5. Management Studio 插件生成安装包要点(以ProjkyAddin为例)

    通过Visual Studio向导生成Management 插件框架就不说了,网上能搜到不少资料.本篇重点是说明怎么设计一个插件安装包,适用于Management Studio 2005 到2014的 ...

  6. innodb crash

    今天上午同事处理了一个innodb crash 的问题,没有备份,如何恢复? 查看日志: 180928 8:42:44 InnoDB: Error: page 163855 log sequence ...

  7. Mysql压缩解决方案

    提到mysql压缩相关的内容,我们能想到的可能是如下几种和压缩相关的场景: 1.客户端和服务器之间传输的数据量太大,需要进行压缩,节约带宽 2.mysql某个列的数据量大,只针对某个列的数据压缩 3. ...

  8. 解决win 和 ubuntu 虚拟机之间 无法 复制粘贴的问题,以及重装vmtool后,还是无法解决的办法

    第一步:重新安装vmware-tool 我这里已经装过了,所以显示这个,不然应该是显示:安装 VMware Tools 它会打开一个文件夹,把压缩包复制到任一个地方解压,执行.pl的那个文件:sudo ...

  9. win10想说爱你不容易——安装.net3.5也是一个坑(已有完美解决方法)

    最终完美解决方法:经过多次波折,终于找到无法正常安装.net3.5的原因了,是因为已删除的用户还有注册表残留导致的,而且这个问题还会影响一个win10更新的安装,导致每天更新失败,撤销更新... 详见 ...

  10. jQuery插件实例三:图片滚动[切换]效果一

    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...