tab 切换类交互功能实现

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.mzph.cn/news/675404.shtml

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

相关文章

v-if 和v-for的联合规则及示例

第073个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下&#xff0c;本专栏提供行之有效的源代码示例和信息点介绍&#xff0c;做到灵活运用。 提供vue2的一些基本操作&#xff1a;安装、引用&#xff0c;模板使用&#xff0c;computed&a…

pytest+allure批量执行测试用例

在 Pytest 中,可以使用装饰器 `@pytest.fixture` 来定义用例级别的前置和后置操作。下面是一个示例代码,演示了如何使用 Pytest 的前置和后置操作: ```python import pytest @pytest.fixture(scope="function") def setup_function(): print("Setup fu…

《游戏引擎架构》 -- 学习2

声明&#xff0c;定义&#xff0c;以及链接规范 翻译单元 声明与定义 链接规范 C/C 内存布局 可执行映像 程序堆栈 动态分配的堆 对象的内存布局 kilobyte 和 kibibyte 流水线缓存以及优化 未完待续。。。

conda创建环境,查看环境,激活环境,查看包,复制环境,删除环境

创建环境 conda create --name [yourEnvname]查看环境 conda env list激活环境 conda activate [yourEnvname]查看环境下的包 conda list复制环境&#xff1a;假设已有环境名为A&#xff0c;需要生成的环境名为B conda create -n B --clone A删除环境 conda remove -n [y…

如何利用腾讯工蜂提升广告推广和用户运营效率

无代码开发&#xff1a;腾讯工蜂的连接优势 在广告推广和用户运营中&#xff0c;腾讯工蜂的无代码开发优势让广告系统和用户运营系统能够轻松地实现无需API开发的集成。这使得没有专业编程技能的工作人员也能通过腾讯工蜂的用户友好界面&#xff0c;实现系统的快速连接和集成&…

svn常用命令及过滤文件 global ignore pattern

SVN常用命令详解和global ignore pattern Subversion&#xff08;SVN&#xff09;是一个版本控制系统&#xff0c;广泛用于软件开发项目中。它能够追踪文件的变更&#xff0c;并且允许多人在同一个项目中协同工作。以下是一些常用的SVN命令及其用法。 1. 检出代码 要从SVN服…

SQL注入(SQL Injection)从注入到拖库 —— 简单的手工注入实战指南精讲

基本SQL注入步骤&#xff1a; 识别目标&#xff1a;确定目标网站或应用程序存在潜在的SQL注入漏洞。收集信息&#xff1a;通过查看页面源代码、URL参数和可能的错误信息等&#xff0c;搜集与注入有关的信息。判断注入点&#xff1a;确定可以注入的位置&#xff0c;比如输入框、…

20240208问题解决

问题解决 armbian输入指令 sudo - i出问题 一些教程 Alist–集分享挂载功能于一身的网盘工具 | Laoyutang https://blog.laoyutang.cn/linux/alist.html docker的启动方式 Docker --restart的参数类型有&#xff1a; no 。默认值&#xff0c;表示容器退出时&#xff0c;Do…

Elasticsearch 安装和配置脚本文档

Elasticsearch 安装和配置脚本文档 目录 **Elasticsearch 安装和配置脚本文档**0.**概述**1.**使用方法&#xff1a;**2.**脚本步骤&#xff1a;**3. **完整代码如下&#xff1a;** 0.概述 此Bash脚本用于自动化在CentOS 7系统上安装和配置Elasticsearch&#xff08;ES&#x…

浅聊一下redis的雪崩,穿透和击穿

雪崩&#xff08;Cache Avalanche&#xff09;&#xff1a; 定义&#xff1a; 雪崩是指缓存中的大量数据在同一时间失效或过期&#xff0c;导致大量的请求直接访问底层数据库或服务&#xff0c;从而对数据库或服务造成巨大的压力。例子&#xff1a; 假设有一组缓存键&#xff0…

pytorch dataloader 中collate_fn是什么

collate_fn&#xff08;collate function&#xff09;是在 PyTorch 中 DataLoader 中使用的一个参数&#xff0c;用于自定义数据加载和批处理的方式。在训练神经网络时&#xff0c;通常会将数据划分成小批量进行处理&#xff0c;collate_fn 就是用来指定如何将单个样本组合成小…

【网工】华为设备命令学习(Telnet)

本次实验AR3为我们实际中远程的路由&#xff0c;AR4模拟我们的设备&#xff0c;最终实现Telnet的远程控制路由&#xff01; 本次笔记主要记录Telnet技术实现原理&#xff0c;后续再补充具体配置代码。 Telnet协议是TCP/IP协议族中的一员&#xff0c;是Internet远程登录服务的…

C++ pair 的使用

pair的作用 C 中的 std::pair 是标准模板库 (STL) 提供的一个容器&#xff0c;它能够存储两个不同类型的数据作为一个整体&#xff0c;其中first&#xff1a;访问 pair 的第一个元素。second&#xff1a;访问 pair 的第二个元素。 int main() {pair<string, int> p;//通…

基于微信小程序的新生报到系统的研究与实现,附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

前端实现支付跳转以及回跳

// 支付地址 const baseURL http://pcapi-xiaotuxian-front-devtest.itheima.net/ const backURL http://127.0.0.1:5173/paycallback const redirectUrl encodeURIComponent(backURL) const payUrl ${baseURL}pay/aliPay?orderId${route.query.id}&redirect${redirec…

【精选】java初识多态 子类继承父类

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

github拉取项目,pycharm配置远程服务器环境

拉取项目 从github上拉取项目到pycharmpycharm右下角选择远程服务器上的环境 2.1. 如图 2.2. 输入远程服务器的host&#xff0c;port&#xff0c;username&#xff0c;password连接 2.3. 选择服务器上的环境 链接第3点 注&#xff1a;如果服务器上环境不存在&#xff0c;先创建…

Android的视图绑定

视图绑定&#xff08;ViewBinding&#xff09;在开发中起到的作用是代替findViewById。 初始设置 ViewBinding是按模块启动的&#xff0c;在使用之前需要在模块中的gradle中开启ViewBinding。 //kotlin android {...buildFeatures {viewBinding true} }//groovy android {.…

上位机建立TCP/IP连接:Matlab实现

Python实现的参考&#xff1a; Xilinx ZYNQTCP通信Python上位机 实现实时视频传输系统 - 知乎 (zhihu.com) GitHub - yg99992/Image_transfer_open_source: ZYNQ-7000 based data transfer through TCP/IP protocol 参考&#xff1a; MATLAB实现tcp连接 - 知乎 (zhihu.com)…

vue3-内置组件-Teleport

Teleport <Teleport> 是一个内置组件&#xff0c;它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。 基本用法 有时我们可能会遇到这样的场景&#xff1a;一个组件模板的一部分在逻辑上从属于该组件&#xff0c;但从整个应用视图的角度来看…