v-for循环列表,展开样式随手风琴
<div class="product_box" v-for="(item,index) of kinds" :key="index">
<div class="main_top">
<div class="title_bottom">
<el-button
round
@click="nowBorrowFn(index)"
:class="{btn_box:index === 0 ? show3 : show4}"
>立即借款</el-button>
</div>
</div>
<el-collapse-transition>
<div v-show="item.flag">
</div>
</el-collapse-transition>
</div>
<script>
nowBorrowFn(index){
let flag = this.kinds[val].flag;
this.kinds.forEach(item => {
item.flag = false;
});
this.kinds[val].flag = !flag;
}
</script>
渲染时需要给v-show一个默认的参数
//来自:https://blog.csdn.net/weixin_42550863/article/details/81980094
v-for循环列表,展开样式随手风琴的更多相关文章
- 微信小程序实现给循环列表点击添加类(单项和多项)
在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...
- 循环列表的Java实现,解决约瑟夫环问题
import java.util.Scanner; /** * 循环列表的Java实现,解决约瑟夫环问题 * * @author LIU * */ public class LinkedList { ...
- ul ol 列表的样式的控制
ul( Unordered List)无序列表 ol(Ordered List)有序列表 列表的样式: 列表原有符号.自定义图形符号.符号显示位置. 1.列表符号 是显示于每一个列表项目前的符号标识. ...
- WPF界面设计技巧(4)—自定义列表项样式
原文:WPF界面设计技巧(4)-自定义列表项样式 有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分. 打开 Microsoft Visual S ...
- 使用elementUI的时候,使用Upload 上传的时候,使用 list-type 属性来设置文件列表的样式,before-upload方法失效
最近在做项目的时候,使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效. 情况下:使用 list-type 属性来设置文件列表的样式. 最终的优化之后:(演 ...
- 页面中php传值后循环列表js获取点击的id
页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...
- Cocos2d-x3.0下实现循环列表
本文的实现是參照我之前在做iOS时实现的一个能够循环的列表这里用C++重写一遍. 效果: 原文地址:http://blog.csdn.net/qqmcy/article/details/2739301 ...
- python 单向循环列表
# -*- coding: utf-8 -*- # @author: Tele # @Time : 2019/04/23 下午 6:54 # 单向循环列表 # 单向循环列表与单向列表的不同之处在于最后 ...
- Python循环列表的方法
python循环列表的几种方法: 第一,依次打印列表中的各项值. 1 #!usr/bin/env python3 2 #!-*- Coding:utf-8 -*- 3 4 ''' 5 多种循环列表的方 ...
随机推荐
- vs开启,Windows 10磁盘占用100%解决办法
https://www.cnblogs.com/time-is-life/p/8888441.html 最后把Home Group相关的服务都改成禁用. 注意: 即使这两个服务没有启动也不行, 一定要 ...
- SoapUI: 从属性变量里面读取值, 把string 转换成arraylist
- 软件开发的podcast
目录 中文 喜马拉雅 https://www.ximalaya.com/ SingularFM 8个开发者值得一听的英文 Podcast https://zhuanlan.zhihu.com/p/24 ...
- 全新思维导图 XMind ZEN v10.0.0 中文破解版
http://www.carrotchou.blog/20331.html 官网 https://www.xmind.cn/ 注意事项 破解版本已经去除了全部的官方试用版的限制,让大家可以像正版用户一 ...
- exe4j 打包jar包程序,inno setup complier打包所有
关于库: jar包中对于引用第三方库的话,需要再exe4j中引用. rxtx http://rxtx.qbang.org/wiki/index.php/Download
- Invalid prop: custom validator check failed for prop "pagination" <Table> vue.runtime.esm
错误如图 原因,返回数据中没有包括分布的属性
- 从原理到应用,Elasticsearch详解
简介 Elasticsearch(简称ES)是一个分布式.可扩展.实时的搜索与数据分析引擎.ES不仅仅只是全文搜索,还支持结构化搜索.数据分析.复杂的语言处理.地理位置和对象间关联关系等. ES的底层 ...
- 开发日记:在VS项目中使用SVN版本号作为编译版本号
在实际项目中(特别是作为产品的项目),版本号是必不可少的一部分.版本号的规则也有许多种,在此不讨论具体的编码规范.对于迭代的产品,版本繁多,特别是有多个实施项目所使用产品的版本不同(基于定制需求)时, ...
- Flink Table Api & SQL 翻译目录
Flink 官网 Table Api & SQL 相关文档的翻译终于完成,这里整理一个安装官网目录顺序一样的目录 [翻译]Flink Table Api & SQL —— Overv ...
- Flask自动刷新前端页面(方便调试)livereload
是不是每次调整模板文件,就要停止flask服务器,重启flask服务器,再去浏览器刷新页面? 有没有办法自动完成这3步呢? 安装livereload即可, 仅仅把app.run() 改为下面的例子就可 ...