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 多种循环列表的方 ...
随机推荐
- CatBoost使用GPU实现决策树的快速梯度提升CatBoost Enables Fast Gradient Boosting on Decision Trees Using GPUs
python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...
- hive函数 get_json_object
pandas和SQL数据分析实战 https://study.163.com/course/courseMain.htm?courseId=1006383008&share=2&sha ...
- Vue ElementUI主页面搭建和导航栏使用,并在刷新页面的时候选中状态消失的问题解决
<template> <div style="height:100%;width: 100%; padding:0 auto; margin: 0 auto;"& ...
- Python3基础 内置函数 dir 查询对象的方法列表
Python : 3.7.3 OS : Ubuntu 18.04.2 LTS IDE : pycharm-community-2019.1.3 ...
- ubuntu 16.04 安装teamviewer
很多人可能会问,为什么要在ubuntu上安装teamview?shell不就够用了吗?但实际上,很多时候,在远程连接linux的时候,我们需要在图形用户界面上进行操作.现在我就遇到了一个实际的问题:每 ...
- revit 碰撞检测相关
Revit二次开发:由房间获取房间的墙 之前用的方法是由房间边界构成的Solid,计算与该Solid相交的Element,然后判断是否为墙.相对来说这个方法比较通用,可以检索出房间的楼板.窗户 ...
- docker 安装jenkins 发布 asp.net core 2.0
安装Docker 其实安装Docker的过程,大家可以到Docker官网找到自己相对应的安装文档进行安装,Docker区分CE和EE的两个版本,具体这两个版本有什么区别,大家自行查阅相关资料,这里不再 ...
- c# Mono.Cecil IL方式 读MethodBody
using Kufen.Common.Definitions; using Mono.Cecil; using System; using System.Collections.Generic; us ...
- 伪造他人账号信息提交数据问题(一般接口都会去校验身份和身份id是否一致)
某APP客户端可以劫持任意账号 双师: 上课的学生上报学生上课状态,请求中带学生自己的id,当切换成其他学生的id ,接口报错,应该会校验token 和 提交的学生id 是否一致
- Superset配置hive数据源
1.在uri中配置 hive://localhost:10000/default 2.查询 3.如果你的hive集群是带有kerberos认证的,hive数据源需要这样配置 hive://xxx:xx ...