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 多种循环列表的方 ...
随机推荐
- x264 b_annexb格式和多slice
实际应用环境:iOS,Android x264_param_t中有下面两个参数值得注意下int i_threads; /* encode multiple frames in paral ...
- CSAGAN的几大重点 - 2
1.生成器 1)MRU(SketchyGAN) 计算过程为: 与DCGAN[46]和ResNet生成架构的定性和定量比较可以在5.3节中找到.MRU块有两个输入:输入特征图xi和图像I,输出特征图yi ...
- C++ int double float对应的长度以及二进制
#include <iostream> using namespace std; void showIntBit(int a); void showDoubleBit(double a1) ...
- springboot放到linux启动报错:The temporary upload location [/tmp/tomcat.8524616412347407692.8111/work/Tomcat/localhost/ROOT/asset] is not valid
1.背景 笔者的springboot在一个非root用户环境下运行,这种环境下可以保证不被潜在的jar/开源框架漏洞提权. 比如在防火墙上把外网访问来的443端口映射到本地8443的java web端 ...
- [Golang] Gin框架学习笔记
0x0 Gin简介 1.Gin 是什么? Gin 是一个用 Go (Golang) 编写的 HTTP web 框架. 它是一个类似于 martini 但拥有更好性能的 API 框架, 由于 httpr ...
- 定制flask-admin的主页
flask也用了很久了,一般配合flask-admin设置后台. 但是flask-admin设置的都是自己加入的,对某些model进行管理. 下面介绍如何定制flask-admin的首页. 原来我们引 ...
- [LeetCode] 734. Sentence Similarity 句子相似度
Given two sentences words1, words2 (each represented as an array of strings), and a list of similar ...
- Docker Compose 部署Nginx服务实现负载均衡
Compose简介: Compose是Docker容器进行编排的工具,定义和运行多容器的应用,可以一条命令启动多个容器,使用Docker Compose,不再需要使用shell脚本来启动容器.Comp ...
- VS2017/VS 2019查看源代码
通过VS2017/VS 2019使用F12 查看DLL源代码 今天在一本书中偶然看到原来VS2017中是可以查看dll中的源码,具体步骤是:工具>选项>文本编辑器>c#>高 ...
- 【记录】【java】反射设值取值
1.设值 /** * 根据属性名设置属性值 * * @param fieldName * @param object * @return */ public boolean setFieldValue ...