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 多种循环列表的方 ...
随机推荐
- 【Swoole】计一次swoole_server配合laravel5启动报错:Address already in use[98]
[2019-11-11 11:42:25 @21371.0] WARNING swSocket_bind(:434): bind(0.0.0.0:9501) failed, Error: Addre ...
- 转载【MySQL】MySQL5.X常用日志配置及5.7和5.6主从复制的区别
转载:https://blog.csdn.net/zyb378747350/article/details/78728886 2)MySQL5.7和5.6主从复制的区别: . 5.6之后默认binlo ...
- intellij idea远程调试
有时候发布后的包不得不进行debug,但是又不方便本地开发环境直接debug模拟,所以不得不需要远程debug. 启动参数 首先在服务端使用JVM的-Xdebug参数启动Jar包. java -Xde ...
- 破解NFC卡
目录 概念 各种卡 IC卡存储器结构 破解工具 破解NFC卡 概念 各种卡 ID卡 工作在低频(125Khz) ID卡 特点 EM4XX系列,多为EM4100/EM4102卡 常用的固化ID卡,出厂固 ...
- spring的multipartResolver和java后端获取的MultipartHttpServletRequest方法对比
这两天在用spring进行上传上遇到问题,今天进行了问题的排查,这个过程也增加了我看spring源码的兴趣!还是很有收获的! 首先先给A组提供了上传接口,并没有在spring的配置文件进行multip ...
- ubuntu16.04下安装运行PL-SLAM
PL-SLAM是Ruben Gomez-Ojeda大神融合点和线特征SLAM的最新成果,并开放了源代码,本博文记录安装运行PL-SLAM遇到的一些问题. 1源代码地址 https://github.c ...
- 禁用 Ubuntu 18.04 Files 的 Type Ahead search 功能
. . . . . Ubuntu 的文件浏览器(Files)提供了一个搜索的功能,叫做“Type Ahead search”.即我们在文件浏览器中输入某个文件的名字时,Files 并不是将焦点定位在某 ...
- [转].gitignore文件不起作用的解决方案
.gitignore文件不起作用的解决方案 觉得有用的话,欢迎一起讨论相互学习~Follow Me 转载地址 https://www.cnblogs.com/liugp/p/10399282.html ...
- ireport5.6.0分组显示
一,ireport中分组 二,java调用实现分组 一,ireport中分组: 1,新建模板文件,纸张随意,名称随意,路径随意 2,连接要分组的数据源 3,添加测试表和数据 CREATE TABLE ...
- 开发日记:DotNetCore 批处理 发布
@echo off@title 中医科院 - 发布@echo ******************************************************@echo ========= ...