<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循环列表,展开样式随手风琴的更多相关文章

  1. 微信小程序实现给循环列表点击添加类(单项和多项)

    在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思 ...

  2. 循环列表的Java实现,解决约瑟夫环问题

    import java.util.Scanner; /** * 循环列表的Java实现,解决约瑟夫环问题 * * @author LIU * */ public class LinkedList { ...

  3. ul ol 列表的样式的控制

    ul( Unordered List)无序列表 ol(Ordered List)有序列表 列表的样式: 列表原有符号.自定义图形符号.符号显示位置. 1.列表符号 是显示于每一个列表项目前的符号标识. ...

  4. WPF界面设计技巧(4)—自定义列表项样式

    原文:WPF界面设计技巧(4)-自定义列表项样式 有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分. 打开 Microsoft Visual S ...

  5. 使用elementUI的时候,使用Upload 上传的时候,使用 list-type 属性来设置文件列表的样式,before-upload方法失效

    最近在做项目的时候,使用elementUI的时候,使用Upload 上传的时候,before-upload方法失效. 情况下:使用 list-type 属性来设置文件列表的样式. 最终的优化之后:(演 ...

  6. 页面中php传值后循环列表js获取点击的id

    页面中php传值后循环列表js获取点击的id值进行js操作 <script type="text/javascript" src="__PUBLIC__/js/jq ...

  7. Cocos2d-x3.0下实现循环列表

    本文的实现是參照我之前在做iOS时实现的一个能够循环的列表这里用C++重写一遍. 效果: 原文地址:http://blog.csdn.net/qqmcy/article/details/2739301 ...

  8. python 单向循环列表

    # -*- coding: utf-8 -*- # @author: Tele # @Time : 2019/04/23 下午 6:54 # 单向循环列表 # 单向循环列表与单向列表的不同之处在于最后 ...

  9. Python循环列表的方法

    python循环列表的几种方法: 第一,依次打印列表中的各项值. 1 #!usr/bin/env python3 2 #!-*- Coding:utf-8 -*- 3 4 ''' 5 多种循环列表的方 ...

随机推荐

  1. opencv 图像resize

    这是文档中的函数原型 cv2.resize(src, dsize[, dst[, fx[, fy[, interpolation]]]]) 参数说明src:要resize的原图,应该是一个矩阵 dsi ...

  2. [转]manjaro安装vmware虚拟机

    全球领先的信息与通信解决方案供应商华为,近日面向全球ICT从业者,以及有兴趣掌握ICT相关知识的人士,免费推出其图形化网络仿真工具平台—eNSP.该平台通过对真实的网络设备的仿真模拟,帮助广大ICT从 ...

  3. C语言宏应用-------#define STR(X) #X

    C语言宏应用-------#define STR(X) #X   #:会把参数转换为字符串 #define STR(x) #x #define MAX 100 STR(MAX) 会被扩展成" ...

  4. OpenShift 4.2 离线安装补充记录

    OpenShift4.2详细安装参考同事王征的安装手册(感谢王征大师的研究和答疑解惑, 大坑文章都已经搞定了,我这里是一些小坑) https://github.com/wangzheng422/doc ...

  5. Mysql update多表联合更新

    下面我建两个表,并执行一系列sql语句,仔细观察sql执行后表中数据的变化,很容易就能理解多表联合更新的用法 student表                                      ...

  6. 关于【vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  7. npm 创建vue项目(指定目录进行创建)

    1.先安装node,js和npm 检验mpm 和node的方式是 npm -v  / node -v 2.安装最新版本 npm install @vue/cli -g 意外安装老版本的是代码  npm ...

  8. 在ensp中的acl控制

    原理 实验模拟 实验拓扑 相关参数 我们在每一台路由器上设置ospf服务,使其互相能通 下面我们配置基本ACL控制访问 配置完成后,尝试在R1上建立telent连接 但是这样设置是不安全的,只要是直连 ...

  9. zookeeper实现的分布式锁

    在分布式系统中,多个jvm对共享资源进行操作时候,要加上锁,这就是分布式锁 利用zookeeper的临时节点的特性,可以实现分布式锁 public class ZookeeperDistrbuteLo ...

  10. IIS提速的几个优化

    一.内存池右键高级设置 1.设置队列5000 2.设置固定回收时间 3.设置空闲时间Suspend 二.网站右键高级设置 1.启用预加载