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 smartimageview网络图片查看器
调用代码: SmartImageView siv = (SmartImageView) findViewById(R.id.siv);siv.setImageUrl(et_path.getText() ...
- 润乾配置连接kingbase(金仓)数据库
问题背景 客户根据项目的不同,使用润乾连接的数据库类型各种各样,此文针对前几日使用润乾设计器连接kingbase金仓数据库做一个说明. kingbase金仓数据库是一款国产数据库,操作方式和配置 ...
- oracle截取字符串去掉字段末尾指定长度的字符
lengthb(string)计算string所占的字节长度:返回字符串的长度,单位是字节 length(string)计算string所占的字符长度:返回字符串的长度,单位是字符 eg: //去掉该 ...
- 开源一款私藏Management Studio插件,ProjkyAddin,送给所有使用SQLServer的园友们
ProjkyAddin 是一款Management Studio 插件,安装包才500多kb,兼容SSMS 2005.SSMS 2008.SSMS 2008 R2.SSMS 2012.SSMS 201 ...
- 如何使用 Jenkins、GitHub 和 Docker 在 Azure 中的 Linux VM 上创建开发基础结构
若要将应用程序开发的生成和测试阶段自动化,可以使用持续集成和部署 (CI/CD) 管道. 本教程介绍如何在 Azure VM 上创建 CI/CD 管道,包括如何: 创建 Jenkins VM 安装并配 ...
- 使用eclipse遇到的unable to install breakpoint的问题
调试一个tomcat工程,设置好断点,启动工程,结果出现了下面的错误: 继续运行,再进入断点之前,还会再度提示,但是最终会命中断点. 使用CGLIB查找关键字,了解到CGLIB是一个AOP的拦截库,想 ...
- .Oracle固定执行计划之SQL PROFILE概要文件
1. 引子Oracle系统为了合理分配和使用系统的资源提出了概要文件的概念.所谓概要文件,就是一份描述如何使用系统的资源(主要是CPU资源)的配置文件.将概要文件赋予某个数据库用户,在用户连接并访问 ...
- Python项目生成requirements.txt的多种方式
我相信任何软件程序都会有依赖的类库,尤其现在开源如此的火爆,因为一个项目可能会有无很多的依赖的包 这个时候难道我们都要一个一个的去找到安装吗?即使你找到了依赖的包 但是呢模块的版本又有很多难道你都要装 ...
- wxpython 编程触发菜单或按钮事件
最近逐步熟悉wxpython,编写了几个小小功能的GUI程序,GUI中免不了会有在代码中触发控件事件的业务需求.在其他Gui界面的语言中有postevent.triggerevent 调用事件名称的函 ...
- windows下PyCharm安装及使用
一.首先安装pycharm,可以参考这篇文章:http://www.jianshu.com/p/042324342bf4 1.win10_X64,其他Win版本也可以. 2.PyCharm版本:Pro ...