vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）...

　　效果图：

　　默认显示最新一条数据：

　　_{点击显示所有数据：}

代码：

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

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

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

　　　　　　　detailList是列表集合

　　　　（以下说明，写一块方便看）

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

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

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

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

转载于:https://www.cnblogs.com/web-aqin/p/9878388.html

vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）...相关推荐

Unity实用小工具或脚本——可折叠伸缩的多级（至少三级）内容列表（类似于Unity的Hierarchy视图中的折叠效果）
目录一.前言二.实现 2.1.创建ScrollView 2.2.制作层级预设体BaseLevelPartObj 2.3.设置该预设体的初始化处理方法 2.4.读取Hierarchy的内容并创建UI ...
如何查找两个列表之间的差异?
1. 概述查找相同数据类型的对象集合之间的差异是一项常见的编程任务.举个例子,假设我们有一份申请考试的学生名单和另一份通过考试的学生名单.这两张名单的区别会告诉我们那些没有通过考试的学生. 在Jav ...
vue 删除两个集合中相同的数据_vue.js如何删除数组里面的数据
vue.js如何删除数组里面的数据发布时间:2020-12-10 12:04:44 来源:亿速云阅读:107 作者:小新这篇文章主要介绍了vue.js如何删除数组里面的数据,具有一定借鉴价值,需 ...
[转载] python set()集合快速比较两个列表内的元素是否一致
参考链接: Python set() python set()集合会自动排序 a=['v','a'] b=['a','v'] same_values = set(a) & set(b) pri ...
求两个集合的差集代码_求求你了，不要再写循环求两个列表的交集，并集和差集了 | pythonic 小技巧...
在 Python 中,求两个列表的交集,并集和差集是经常会遇到的需求,而且也比较简单. 最容易想到的就是写循环,对两个列表分别进行循环,然后判断元素是否在另一个列表中,求得最终结果. 但这种方法比较 ...
python 两个列表相互映射_Python基础 — 10分钟学习函数式Python
点击上方蓝字"Python圈子",进行关注~ (图片源自网络) 在这篇10分钟的文章中,您将学习Python中的函数式范型.您还将学习列表推导式. 目录 1. 函数式范式 2. ...
Vue之小目标列表实现
Vue之小目标列表实现今天来实现一个简单的小目标列表功能. 效果图: 功能:可以添加目标添加后自动显示在最下面,如果勾选了就说明是已完成的目标. 1.创建一个文本框用于添加目标.并绑定键盘回车事件@ ...
Vue 2 | Part 5 列表渲染和事件监听
之前在vue里面绑定数据,都只是单个地绑定.这期我们来看一下怎样渲染列表,然后通过事件监听方法往列表里面增加item. 列表渲染废话不多说,直接上代码: <div id="app&q ...
Vue面试题重难点总结
文章目录 1. 如何实现一个路径渲染多个组件? 2. vue-router 3.1.0 `<router-link>`新增的v-slot属性怎么用? 3. 如何监测动态路由的变化 4. 对 ...

vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）...

vue实现两重列表集合，点击显示，点击隐藏的折叠效果，（默认显示集合最新一条数据，点击展开，显示集合所有数据）...相关推荐

最新文章

热门文章