tab 切换类交互功能实现

news2024/9/24 13:24:00

tab切换类交互:

  1. 记录激活项(整个对象/id/index)
  2. 动态类型控制

下面以一个地址 tab 切换业务功能为例:

<div class="text item" :class="{active : activeAddress.id === item.id}" @click="switchAddress(item)"
     v-for="item in checkInfo.userAddresses" :key="item.id">
  <ul>
    <li><span>收<i/>货<i/>人:</span>{{ item.receiver }}</li>
    <li><span>联系方式:</span>{{ item.contact }}</li>
    <li><span>收货地址:</span>{{ item.fullLocation + item.address }}</li>
  </ul>
</div>
const activeAddress = ref({})
const switchAddress = (item) => {
  activeAddress.value = item
}

在这里插入图片描述

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

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

相关文章

2023年出版的新书中提到的《人月神话》(202402更新)(2)共8本

DDD领域驱动设计批评文集 做强化自测题获得“软件方法建模师”称号 《软件方法》各章合集 《人月神话》于1975年出版&#xff0c;1995年出二十周年版。自出版以来&#xff0c;该书被大量的书籍和文章引用&#xff0c;直到现在热潮不退。 2023年&#xff0c;清华大学出版社推…

MySQL 升级脚本制作

当数据库更新字段后或添加一些基础信息&#xff0c;要对生产环境进行升级&#xff0c;之前都是手动编写sql&#xff0c;容易出错还容易缺失。 通过 Navcat 工具的数据库结构同步功能和数据同步功能完成数据库脚本的制作。 一、结构同步功能 1、选择 工具–结构同步&#xff1…

WifiConfigStore初始化读取-Android13

WifiConfigStore初始化读取 1、StoreData创建并注册2、WifiConfigStore读取2.1 文件读取流程2.2 时序图2.3 日志 1、StoreData创建并注册 packages/modules/Wifi/service/java/com/android/server/wifi/WifiConfigManager.java mWifiConfigStore.registerStoreData(mNetworkL…

机器学习 - 梯度下降

场景 上一章学习了代价函数&#xff0c;在机器学习中&#xff0c;代价模型是用于衡量模型预测值与真实值之间的差异的函数。它是优化算法的核心&#xff0c;目标是通过调整模型的参数来最小化代价模型的值&#xff0c;从而使模型的预测结果更接近真实值。常见的代价模型是均方…

猫头虎分享已解决Bug ‍ || TypeError: Object of type ‘int64‘ is not JSON serializable

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

fghbbbbbbbbbb

欢迎关注博主 Mindtechnist 或加入【Linux C/C/Python社区】一起探讨和分享Linux C/C/Python/Shell编程、机器人技术、机器学习、机器视觉、嵌入式AI相关领域的知识和技术。 磁盘满的本质分析 专栏&#xff1a;《Linux从小白到大神》 | 系统学习Linux开发、VIM/GCC/GDB/Make工具…

【精选】java继承进阶——构造方法的访问特点 this、super使用

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…

Vulnhub-Empire靶机-详细打靶流程

渗透思路 1.确认靶机IP地址2.端口服务扫描3.敏感目录扫描4.ffuf命令在这个目录下&#xff0c;继续使用ffuf工具扫描 5.ssh私钥爆破1.将私钥写进sh.txt中2.将私钥转换为可以被john爆破的形式3.通过John爆破 6.ssh私钥登陆7.icex64提权8.arsene提权 1.确认靶机IP地址 ┌──(roo…

Unity引擎学习笔记之【动画剪辑和曲线操作】

动画剪辑和曲线Animation Clip 点选一个包含动画的FBX模型&#xff0c;在其检查器中便可查看动画剪辑 一、动画剪辑 1.Model 2.RIg 538.jpg%20%3D600x&pos_idimg-st6QJc3x-1707050419493) 无动画、旧版Animation动画、普通道具或角色动画、人形角色动画 3.Animation 二…

1 月 Web3 游戏行业概览:市场实现空前增长

作者&#xff1a;lesleyfootprint.network 今年一月&#xff0c;区块链游戏领域迎来了爆发式增长&#xff0c;活跃用户的数量大幅提升。 区块链游戏不断融合 AI 技术&#xff0c;旨在提升玩家体验并扩大其服务范围&#xff0c;公链与游戏的兼容性问题也日渐受到重视。技术革新…

又一款图像AI应用爆火,团队仅两人,单月吸引40万用户

又一款AI原生应用火了。近日&#xff0c;AI图像增强应用Magnific AI广受追捧&#xff0c;该应用在发布一个多月之后吸引了40万注册用户。 Magnific AI不仅可以用生成式AI技术放大图像&#xff0c;还能一键提升图像的分辨率&#xff0c;把原图呈现的更清晰&#xff0c;更有质感…

Web前端-移动web开发_rem布局

文章目录 移动web开发之rem布局1.0 rem基础1.1 rem单位(重点)1.2 em单位(了解)1.3 媒体查询什么是媒体查询媒体查询语法规范 1.4 less 基础维护css弊端Less 介绍Less安装Less 使用之变量使用node编译less的指令Less 编译 vocode Less 插件Less 嵌套Less 运算Less中的Mixin混入L…

xinput1_3.dll丢失怎么办?7种不同解决方法分享

xinput1_3.dll是微软Microsoft DirectX的一个重要动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它主要与DirectInput API相关&#xff0c;为Windows操作系统中的游戏和应用程序提供对各种输入设备的支持。以下是关于xinput1_3.dll的详细全面介绍&#xff1a; 1、属性…

谷歌seo搜索引擎优化有什么思路?

正常做seo哪有那么多思路&#xff0c;其实就那么几种方法&#xff0c;无非就关键词&#xff0c;站内优化&#xff0c;外链&#xff0c;可以说万变不离其宗&#xff0c;但如果交给我们&#xff0c;你就可以实现其他的思路&#xff0c;或者说玩法 收录可以说是一个网站的基础&…

宏观行业心得

OLAP的特点 电商这样的OLTP场景大家更熟悉。相比之下&#xff0c;OLAP的特点&#xff1a; 读相对多&#xff0c;1000row以上大批写入&#xff0c;不改已有数据查询时输出很多行、很少列&#xff0c;结果被过滤或聚合后能够在一台服务器的内存中单台服务器qps数百&#xff0c;…

222. 完全二叉树的节点个数 - 力扣(LeetCode)

题目描述 给你一棵 完全二叉树 的根节点 root &#xff0c;求出该树的节点个数。 完全二叉树 的定义如下&#xff1a;在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都集中在该层最左边的若干…

Python中的HTTP代理与网络安全

在当今数字化的世界里&#xff0c;网络安全已经成为我们无法忽视的重要议题。无数的信息在网络上传递&#xff0c;而我们的隐私和敏感数据也在这个过程中可能面临被窃取或滥用的风险。在Python编程中&#xff0c;HTTP代理作为一种工具&#xff0c;能够在网络安全方面发挥重要的…

Markdown:简洁高效的文本标记语言

引言 在当今信息爆炸的时代&#xff0c;我们需要一种简洁、高效的文本标记语言来排版和发布内容。Markdown应运而生&#xff0c;它是一种轻量级的文本标记语言&#xff0c;以其简单易学、易读易写的特点&#xff0c;成为了广大写作者的首选工具。本文将介绍Markdown的语法优缺…

CODE V的API 之 PSF数据的获取(3)

PSF的获取 文章目录 PSF的获取前言一、主要代码总结 前言 主要利用buf语句进行传递&#xff0c;在worksheet中有收藏。 一、主要代码 Sub OnRunPSF() Dim session As CVCommand Set session CreateObject("CodeV.Command.102") session.SetStartingDirectory (&q…

EasyRecovery2024免费版具体下载步骤的详细信息

关于EasyRecovery具体下载步骤的详细信息&#xff0c;但一般来说&#xff0c;你可以通过访问EasyRecovery的官方网站或者在一些知名的软件下载网站上找到下载链接。在下载时&#xff0c;请确保选择与你电脑系统相匹配的版本&#xff0c;并注意软件的安全性和来源的可靠性。 Eas…