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 ...
随机推荐
- 【Java】操作Sqlite数据库
首先在https://github.com/xerial/sqlite-jdbc下载jar包 import java.sql.Connection; import java.sql.DriverMan ...
- TFS工具(tf.exe)使用与强制解除锁定签出
在工作区 NTP01_SUNTAI 中,NTP01TFSUser 为 签出 锁定了项 $/NTP01/EIPD/EIPD.Client/Views/Courseware/EditorOne.xaml. ...
- linux 局域网探测工具nmap
NMap,也就是Network Mapper,是Linux下的网络扫描和嗅探工 具包,其基本功能有三个, 一是探测一组主机是否在线: 其次是扫描主机端口,嗅探所提供的网络服务: 还可以推断主机所用的操 ...
- VisualSVN Server迁移的方法
VisualSVN Server迁移涉及到两种情况: 第一种情况:VisualSVN Server没有更换电脑或者服务器,只是修改Server name. 第二种情况:当VisualSVN Serve ...
- 转:.NET中的三种Timer的区别和用法(转)
//1.实现按用户定义的时间间隔引发事件的计时器.此计时器最宜用于 Windows 窗体应用程序中,并且必须在窗口中使用. System.Windows.Forms.Timer // 2.提供以指定的 ...
- python安装lib库
time:2015/11/11 双十一 一.初衷 看到一篇帖子[1],里面有python代码,就想实现一下,代码如下: import cv2 as cv import numpy as np from ...
- 评微软收购GitHub
前段时间,微软正式宣布以75亿美元收购GitHub.除了微软和GitHub以外,也许对这笔并购最在意的,正是微软的同城敌友,亚马逊.在我看来,GitHub也许是微软史上最好的收购. 75亿美元贵不贵? ...
- MySQL复制(二)Master-Slave复制实践
1. 准备工作 首先要准备2台机器,分别安装mysql 我这里的版本是5.1.73,mysql数据库安装请参考:http://www.cnblogs.com/tangyanbo/p/4289753.h ...
- 在windows下的虚拟环境中使用tk,要留神了
事情是这样的:有朋友在学习用matplotlib作图,遇到一些问题问我,我也没用过,就想先装一个试试.然后呢,我就随手创建了个虚拟环境.结果,涉及到matplotlib的第一行就报错了: Traceb ...
- 1503. [NOI2004]郁闷的出纳员【平衡树-splay】
Description OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的 工资.这本来是一份不错的工作,但是令人郁闷的是,我们的老板反复无常,经 ...