vant+vue控制列表展开
<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
:offset="10"
:immediate-check="false"
> <div class="comp" v-for="(item,index) in tabledata" :class="activeClass===index?'':'comp-active'">
<div class="cell"><span>组件名称:</span>{{item.component}}</div>
<div class="cell"><span>实例名称:</span>{{item.instance_name}}</div>
<div class="cell"><span>实例IP:</span>{{item.ip}}</div>
<div class="cell"><span>实例端口:</span>{{item.port}}</div> <div class="cell expand" @click="isActive(index)" v-show="activeClass!==index">
<span style="float: left">...</span>
<van-icon name="arrow-down"/>
</div> <div class="cell"><span>远程启停:</span>
<van-tag type="success" v-if="item.is_container">开启</van-tag>
<van-tag type="danger" v-else>关闭</van-tag>
</div>
<div class="cell"><span>启停脚本:</span>{{item.script}}</div>
<div class="cell"><span>日志路径:</span>{{item.logpath}}</div>
<div class="cell expand" @click="activeClass=-1">
<van-icon name="arrow-up"/>
</div>
</div> </van-list>
data() {
return {
activeClass: -1,// 0为默认选择第一个,-1为不选择
}
},
methods: {
isActive(index){
this.activeClass = index;
},
vant+vue控制列表展开的更多相关文章
- 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 二级列表折叠面板
请求出来的数据是二级列表,需要点击一级列表展开相应的二级列表 data(){ return { info: [ {name:'一级菜单1',lists:[{price:1},{price:2}]}, ...
- 手势识别官方教程(8)拦截触摸事件,得到触摸的属性如速度,距离等,控制view展开
onInterceptTouchEvent可在onTouchEvent()前拦截触摸事件, ViewConfiguration得到触摸的属性如速度,距离等, TouchDelegate控制view展开 ...
- CSS控制列表样式属性list-style有哪些?怎么用?
CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...
- 034——VUE中表单控件处理之使用vue控制radio表单的实例操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 031——VUE中表单控件处理之使用vue控制input和textarea表单项
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Phalcon 訪问控制列表 ACL(Access Control Lists ACL)
Phalcon在权限方面通过 Phalcon\Acl 提供了一个轻量级的 ACL(訪问控制列表). Access Control Lists (ACL) 同意系统对用户的訪问权限进行控制,比方同意訪问 ...
- ORA-24247: 网络訪问被訪问控制列表 (ACL) 拒绝
ORA-24247: 网络訪问被訪问控制列表 (ACL) 拒绝 注意:须要在system用户下使用命令 须要先使用 DBMS_NETWORK_ACL_ADMIN.CREATE_ACL 创建訪问控 ...
- Vue 基本列表 && 数据过滤与排序
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
随机推荐
- [Udemy] AWS Certified Data Analytics Specialty - 6.Security
S3 加密 SSE-S3 SSE-KMS SSE-C Client Side Encryption SSL/TLS S3 支持http/https 两种协议 KMS KMS最大能加密4KB的数据,再大 ...
- 总结篇4:redis 核心数据存储结构及核心业务模型实现应用场景
总结篇4:redis 核心数据存储结构及核心业务模型实现应用场景 redis 和memcached 有什么区别?为什么在高并发下,单线程的redis 比多线程的效率高? mc 可以缓存图片和视频,re ...
- Serilog文档翻译系列(一) - 入门指南
保持优质文档是 Serilog 的优先事项.如果你发现文档中有缺失或不准确的内容,或者希望通过添加主题或教程来扩展 wiki,请通过问题追踪系统告知我们. 为什么选择Serilog? 与许多其他 .N ...
- Angular Material 18+ 高级教程 – Custom Themes for Material Design 2 (自定义主题 Material 2)
v18 更新重要说明 从 Angular Material v18 开始,默认使用的是 Material 3 Design (简称 M3),本篇教的是旧版本的 Material 2 Design (简 ...
- JavaScript – CommonJS
前言 既然写了 JavaScript – ES Module, 也就顺便些 CommonJS 呗, 建议先看 ES Module 那篇. 参考 Youtube – Require vs Import ...
- CSS & JS Effect – Dialog Modal
效果 参考: Youtube – Create a Simple Popup Modal Youtube – Create a Modal (Popup) with HTML/CSS and Java ...
- WiFi基础(四):WiFi工作原理及WiFi接入过程
liwen01 2024.09.16 前言 802.11 无线 WiFi 网有三类帧:数据帧.管理帧.控制帧.与有线网相比,无线 WiFi 网会复杂很多.大部分应用软件开发对 WiFi 的控制帧和管理 ...
- volatile关键字最全原理剖析
介绍 volatile是轻量级的同步机制,volatile可以用来解决可见性和有序性问题,但不保证原子性. volatile的作用: 保证了不同线程对共享变量进行操作时的可见性,即一个线程修改了某个变 ...
- USB分析仪USB3.2日志分析
1.简介 USB2.0总线采用轮询模式,即总线事务开始时,都要先发送IN或者OUT令牌包,以通知端点或者查询端点是否准备好.而USB3.2采用了异步通知模式,若端点没有准备好,则主机无需轮询,端点准备 ...
- 高通USB overview
一,Dedicated Connectivity Ports (USB) 1,USB 3.1 Type-C with DisplayPort 2,Support USB3-DisplayPort Co ...