vue手写卡片切换,并且点击获取到卡片信息

需求:做一个卡片样式的列表,之后有一些基本信息,之后卡片选中后样式不一样,默认选中第一个卡片,点击卡片后可以获取到卡片的信息

一、效果

二、关键代码

index默认重0开始,activeTable默认为0,0-0等于0,但是有个!那就是取反的意思,那就是true ,就是点击的这个会有选中的active样式,也就是默认第一个会被选中,之后点击其他卡片只需要把index给赋值给activeTab就能实现了

  <div class="menu-list"><div v-for="(item, index) in menuTableData" :key="index"><div :class="{ active: !(index - activeTab), menus: 'menus' }" @click="menuClick(item, index)"><div class="menu-avatar"><i class="el-icon-star-off"></i></div><div class="menu-text">{{ item.name }}</div></div></div></div>

三、完整代码

<template><div style="width: 600px; margin-top: 50px"><div class="menu-list"><div v-for="(item, index) in menuTableData" :key="index"><!-- index==0,activeTable默认为0,0-0等于0,但是有个!那就是取反的意思,那就是true ,就是点击的这个会有选中的active样式--><div :class="{ active: !(index - activeTab), menus: 'menus' }" @click="menuClick(item, index)"><div class="menu-avatar"><i class="el-icon-star-off"></i></div><div class="menu-text">{{ item.name }}</div></div></div></div></div>
</template><script>
export default {data() {return {menuTableData: [{name: '李华'},{name: '张三'},{name: '李四'}],activeTab: 0 //根据点击进行高亮};},mounted() {},methods: {menuClick(item, index) {this.activeTab = index;console.log(item, '点击菜单管理获取');}}
};
</script><style lang="scss" scoped>
.menu-list {height: calc(100vh - 360px);overflow: auto;display: flex;flex-direction: column;box-sizing: border-box;// 左侧主要样式.menus {/* 矩形 7 */width: 300px;height: 80px;background: rgb(255, 255, 255);box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);border-radius: 4px;margin: 20px 20px;display: flex;align-items: center;.menu-avatar {/* 椭圆形 */width: 43px;height: 43px;background: rgba(163, 241, 255, 0.4);border-radius: 50%;display: flex;justify-content: center;align-items: center;margin-left: 20px;i {font-size: 25px;color: #fff;}}.menu-text {/* 用户管理 */color: pink;font-family: 阿里巴巴普惠体;font-size: 18px;font-weight: 400;line-height: 22px;letter-spacing: -1px;text-align: left;margin-left: 20px;}}// 选中菜单管理列表后高亮.active {box-shadow: 0px 8px 8px 0px rgba(27, 19, 19, 0.1);.menu-avatar {background: rgb(156, 210, 241);}.menu-text {font-weight: 600;}}
}
</style>

文章到此结束希望对你有所帮助~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/699001.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Facebook的数字社交使命:连接世界的下一步

在数字化时代&#xff0c;社交媒体已成为人们生活的重要组成部分&#xff0c;而Facebook作为其中最具影响力的平台之一&#xff0c;一直以来都在努力履行着自己的使命——连接世界。然而&#xff0c;随着时代的变迁和技术的发展&#xff0c;Facebook正在不断探索着连接世界的下…

Kafka:kafka的技术架构? ①

一、Kafka的优势 Apache Kafka是一个开放源代码的分布式事件流平台&#xff0c;成千上万的公司使用它来实现高性 能数据管道&#xff0c;流分析&#xff0c;数据集成和关键任务等相关的应用程序。 二、技术架构 0&#xff09;partition分区可以设置备份数&#xff0c;也可以设…

Go 如何按行读取(大)文件?尝试 bufio 包提供的几种方式

嗨&#xff0c;大家好&#xff01;我是波罗学。本文是系列文章 Go 技巧第十七篇&#xff0c;系列文章查看&#xff1a;Go 语言技巧。 本文将介绍 Go 如何按行读取文件&#xff0c;基于此会逐步延伸到如何按块读取文件。 引言 我们将要介绍的按行读取文件的方式其实是非常适合…

C# 1.消息队列MQ使用场景--图文解析

为什么使用消息队列MQ&#xff08;Message Queue&#xff09;&#xff1f; 消息队列有什么优点和缺点&#xff1f; Kafka(大数据日志采集)、ActiveMQ(最早的MQ--目前使用较少)、RabbitMQ(开源&#xff0c;中小型企业使用足够)、RocketMQ(阿里开发&#xff0c;大型企业适用) 都…

125 Linux C++ 系统编程4 Linux 静态库制作,动态库制作,静态库和动态库对比。静态库运行时找不到库的bug fix

一 静态库 和动态库 对比 静态库的原理&#xff1a;假设我们有一个 静态库&#xff0c;大小为500M&#xff0c;这个静态库实现了一些打牌的逻辑算法&#xff0c;提供了一堆API&#xff0c;让开发者 可以轻松的实现 54张扑克牌的随机发牌&#xff0c;指定发牌等功能。 我们写了…

Python入门学习——基础语法

一、Python解释器 1. Python解释器的作用是&#xff1a; 将Python代码翻译成计算机认识的O和1并提交计算机执行在解释器环境内可以一行行的执行我们输入的代码也可以使用解释器程序&#xff0c;去执行".py"代码文件 2. Python解释器程序在&#xff1a; <Python…

google浏览器chrome无法访问localhost等本地虚拟域名的解决方法

场景一&#xff1a; 谷歌浏览器访问出现&#xff1a;forbbiden 403 问题&#xff0c;或者直接跳转到正式域名(非本地虚拟域名) 访问本地的虚拟域名http://www.hd.com/phpinfo.php?p1发生了302 条状 火狐浏览器正常访问; 解决方法&#xff1a; 方法1&#xff1a;在谷歌浏览器…

Linux的ACL权限以及特殊位和隐藏属性

前言&#xff1a; ACL是什么&#xff1f; ACL&#xff08;Access Control List&#xff09;是一种权限控制机制&#xff0c;用于在Linux系统中对文件和目录进行细粒度的访问控制。传统的Linux权限控制机制基于所有者、所属组和其他用户的三个权限类别&#xff08;读、写、执行…

转运机器人,AGV底盘小车:打造高效、精准的汽车电子生产线

为了满足日益增长的市场需求&#xff0c;保持行业领先地位&#xff0c;某汽车行业电子产品企业引入富唯智能AMR智能搬运机器人及其智能物流解决方案&#xff0c;采用自动化运输措施优化生产节拍和搬运效率&#xff0c;企业生产效率得到显著提升。 项目背景&#xff1a; 1、工厂…

milvus Delete api写s3的流程

Delete api写s3的流程 milvus版本:v2.3.2 整体架构: Delete 的数据流向 delete相关配置 dataNode:segment:insertBufSize: 16777216 # Max buffer size to flush for a single segment.deleteBufBytes: 67108864 # Max buffer size to flush del for a single channelsyncPe…

汽修专用产品---选型介绍 汽修示波器 汽车示波器 汽车电子 汽修波形 汽车传感器波形 汽车检测

为了满足汽车电子用户的测量需求&#xff0c;我司特推出汽修专用版示波器&#xff0c;一键测量&#xff0c;轻松找出汽车问题。 LOTO各种型号的示波器其实都可以用作汽车传感器信号波形的检测。汽修应用中&#xff0c;工程师对示波器的性能要求对于LOTO产品来说不算高。 在我们…

《TCP/IP详解 卷一》第6章 DHCP

目录 6.1 引言 6.2 DHCP 6.2.1 地址池和租用 6.2.2 DHCP和BOOTP消息格式 6.2.3 DHCP和BOOTP选项 6.2.4 DHCP协议操作 6.2.5 DHCPv6 6.2.6 DCHP中继 6.2.7 DHCP认证 6.2.8 重新配置扩展 6.2.9 快速确认 6.2.10 位置信息&#xff08;LCI和LoST&#xff09; 6.2.11 移…

Unity Shader ASE基础效果思路与代码(二):边缘光、扰动火焰

Unity Shader ASE基础效果思路与代码(二)&#xff1a;边缘光、扰动火焰 这里写目录标题 Unity Shader ASE基础效果思路与代码(二)&#xff1a;边缘光、扰动火焰边缘光效果展示&#xff1a;代码与思路&#xff1a; 扰动火焰效果展示&#xff1a;代码与思路&#xff1a; 边缘光 …

snmp协议开通教程

目录 一、什么是snmp协议&#xff1f; 二、snmp协议可以用来干什么&#xff1f; 三、snmp协议的开通 1、snmpv2协议开通 2、snmpv3协议开通 一、什么是snmp协议&#xff1f; SNMP&#xff08;Simple Network Management Protocol&#xff09;是一种用于网络管理的标准协议&a…

STM32物联网(封装AT指令进行TCP连接及数据的接收和发送)

文章目录 前言一、AT指令函数封装1.向ESP8266发送数据函数2.设置ESP8266工作模式3.连接WIFI函数4.查询IP地址5.连接TCP服务器6.发送数据到TCP服务器7.接收并解析来自TCP服务器的数据8.关闭TCP服务器 二、代码测试总结 前言 本篇文章将继续带大家学习STM32物联网&#xff0c;那…

Vue 2.0 中的 Vuex Store 状态管理器核心概念和组成部分

Vue 2.0 中的 Vuex Store 状态管理器核心概念和组成部分 State&#xff08;状态&#xff09;&#xff1a; Vuex Store 的核心就是集中式存储应用的所有组件的状态。它是一个单一状态树&#xff0c;所有的组件都从这个状态树中读取数据并可以响应状态的变化。 const state {c…

Ubuntu20.04 查看系统版本号

目录 uname -auname -vlsb_release -acat /etc/issuecat /proc/version uname -a 查看系统发行版本号和操作系统版本 uname -v 查看版本号 lsb_release -a 查看发行版本信息 cat /etc/issue 查看系统版本 cat /proc/version 查看内核的版本号

计算机网络面经_体系结构一文说清

编辑&#xff1a;平平无奇的羊 目录 基础 1. 计算机网络结构体系 三种模型之间的区别&#xff1a; 如何背诵&#xff1a; 进阶 OSI七层模型&#xff1a; TCP/IP四层模型&#xff1a; TCP/IP五层模型 总结 字节实习生为大家带来的是计算机网络面经系列博文&#xff0c;由浅…

分散的产品开发团队

分散的产品开发团队指的是各个团队或成员在地理位置上分布在不同地方&#xff0c;通过互联网和现代通讯技术进行协作和沟通&#xff0c;以共同完成产品开发任务的团队模式。 这种团队模式的优势在于可以充分利用各地的人才资源&#xff0c;降低团队的管理和协作成本&#xff0…

SpringBoot和SpringCloud的区别,使用微服务的好处和缺点

SpringBoot是一个用于快速开发单个Spring应用程序的框架&#xff0c;通过提供默认配置和约定大于配置的方式&#xff0c;快速搭建基于Spring的应用。让程序员更专注于业务逻辑的编写&#xff0c;不需要过多关注配置细节。可以看成是一种快速搭建房子的工具包&#xff0c;不用从…