tab 切换类交互功能实现

news/2024/3/4 22:06:50/文章来源:https://blog.csdn.net/XiugongHao/article/details/136081948

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.ldbm.cn/p/343335.html

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

相关文章

C++ STL string类使用及实现详解

1. string简介 C语言中&#xff0c;可以用字符数组来存储字符串&#xff0c;如&#xff1a; char ch[] "hello world"; C中&#xff0c;可以使用string类对象来存储字符串&#xff0c;使用起来比C语言中的字符数组要方便得多&#xff0c;而且不用考虑容量的问题。…

Redis核心技术与实战【学习笔记】 - 24.Redis 脑裂

简述 所谓脑裂&#xff0c;就是指在主从集群中&#xff0c;同时有两个主节点&#xff0c;它们都能接收写请求。而脑裂最直接的影响就是客户端不知道该往哪个主节点写入数据&#xff0c;结果就是不同的客户端会往不同的主机诶点上写入数据。而且&#xff0c;严重的话&#xff0…

Android Studio 中使用 Gradle 配置多渠道打包 配置不同的渠道名称 配置不同的App名称 配置不同的Logo

废话 三种操作都是可以混合一起用的&#xff0c;本来也不是很难的事情&#xff0c;为了方便分别理解&#xff0c;这里我就分开处理了。 如果需要将打包出来的apk的名称自动命名成指定格式&#xff0c;也可以进行配置&#xff0c;我这里没这个需求&#xff0c;所以这里就不讨论了…

应用程序数字证书生成及签名步骤

1.非管理员权限切换到管理员用户下&#xff0c;再C盘找到C:\Program Files (x86)\Windows Kits&#xff0c;查看当前路径下是否包含生成数字签名的文件。 注意&#xff1a; 此时不同的电脑会有不同的路径&#xff08;如蓝色框&#xff09;&#xff0c;需要找到具备生成工具的相…

Spring是怎么解决循环依赖的

首先先解释一下什么叫循环依赖 循环依赖:循环依赖其实就是循环引用,也就是两个或两个以上的bean互相持有对方,最终形成闭环.比如A依赖于B,B依赖于A 循环依赖在spring中是允许存在的,spring框架依据三级缓存已经解决了大部分的循环依赖 一级缓存:单例池,缓存已经经历了完整的…

【漏洞复现】狮子鱼CMS文件上传漏洞(image_upload.php)

Nx01 产品简介 狮子鱼CMS&#xff08;Content Management System&#xff09;是一种网站管理系统&#xff0c;它旨在帮助用户更轻松地创建和管理网站。该系统拥有用户友好的界面和丰富的功能&#xff0c;包括页面管理、博客、新闻、产品展示等。通过简单直观的管理界面&#xf…

re:从0开始的CSS学习之路 1. CSS语法规则

0. 写在前面 现在大模型卷的飞起&#xff0c;感觉做页面的活可能以后就不需要人来做了&#xff0c;不知道现在还有没有学前端的必要。。。 1. HTML和CSS结合的三种方式 在HTML中&#xff0c;我们强调HTML并不关心显示样式&#xff0c;样式是CSS的工作&#xff0c;现在就轮到C…

disql备份还原

disql备份还原 前言 本文档根据官方文档&#xff0c;进行整理。 一、概述 在 disql 工具中使用 BACKUP 语句你可以备份整个数据库。通常情况下&#xff0c;在数据库实例配置归档后输入以下语句即可备份数据库&#xff1a; BACKUP DATABASE BACKUPSET db_bak_01;语句执行完…

Spring基础 - Spring简单例子引入Spring要点

Spring基础 - Spring简单例子引入Spring要点 设计一个Spring的Hello World 设计一个查询用户的案例的两个需求&#xff0c;来看Spring框架帮我们简化了什么开发工作 pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"htt…

x-cmd pkg | httpx - 为 Python 设计的下一代 HTTP 客户端库

目录 简介首次用户功能特点进一步探索 简介 HTTPX 是一个为 Python 设计的下一代 HTTP 客户端库&#xff0c;由 Tom Christie 创建。它提供了同步和异步的 API&#xff0c;并支持 HTTP/1.1 和 HTTP/2 协议。与 Requests 库类似&#xff0c;但增加了对异步请求的支持和 HTTP/2 …

《UE5_C++多人TPS完整教程》学习笔记9 ——《P10 创建会话(Creating A Session)》

本文为B站系列教学视频 《UE5_C多人TPS完整教程》 —— 《P10 创建会话&#xff08;Creating A Session&#xff09;》 的学习笔记&#xff0c;该系列教学视频为 Udemy 课程 《Unreal Engine 5 C Multiplayer Shooter》 的中文字幕翻译版&#xff0c;UP主&#xff08;也是译者&…

拟合案例1:matlab积分函数拟合详细步骤及源码

本文介绍一下基于matlab实现积分函数拟合的过程。采用的工具是lsqcurvefit和nlinfit两个函数工具。关于包含积分运算的函数,这里可以分为两大类啊。我们用具体的案例来展示:一种是积分运算中不包含这个自变量,如下图的第一个公式,也就是说它这个积分运算只有R和Q这两个待定…

基于图像掩膜和深度学习的花生豆分拣(附源码)

目录 项目介绍 图像分类网络构建 处理花生豆图片完成预测 项目介绍 这是一个使用图像掩膜技术和深度学习技术实现的一个花生豆分拣系统 我们有大量的花生豆图片&#xff0c;并以及打好了标签&#xff0c;可以看一下目录结构和几张具体的图片 同时我们也有几张大的图片&…

《CSS 简易速速上手小册》第6章:高级 CSS 技巧(2024 最新版)

文章目录 6.1 使用 CSS 变量进行设计&#xff1a;魔法配方的调配6.1.1 基础知识6.1.2 重点案例&#xff1a;创建可定制的主题6.1.3 拓展案例 1&#xff1a;响应式字体大小6.1.4 拓展案例 2&#xff1a;使用 CSS 变量创建动态阴影效果 6.2 calc(), min(), max() 等函数的应用&am…

【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总

【机器学习与自然语言处理】预训练 Pre-Training 各种经典方法的概念汇总 前言请看此正文预训练 Pre-Training无监督学习 unsupervised learning概念&#xff1a;标签PCA 主成分分析&#xff08;Principal Component Analysis&#xff09;降维算法LSA 潜在语义分析&#xff08;…

Github 2024-02-07 开源项目日报 Top9

根据Github Trendings的统计&#xff0c;今日(2024-02-07统计)共有9个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Rust项目2TypeScript项目2Python项目2Ruby项目1HTML项目1NASL项目1Go项目1C项目1Svelte项目1C项目1 React Nat…

【MySQL】——数值函数的学习

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-Z1fAnfrxGD7I5gqp {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

阿里云带宽计费模式怎么选?如何收费的?

阿里云服务器带宽计费模式分为“按固定带宽”和“按使用流量”&#xff0c;有什么区别&#xff1f;按固定带宽是指直接购买多少M带宽&#xff0c;比如1M、5M、10M、100M等&#xff0c;阿里云直接分配用户所购买的带宽值&#xff0c;根据带宽大小先付费再使用&#xff1b;按使用…

React Native开发iOS实战录

文章目录 背景环境准备基础工具&#xff1a;xcode安装主要工具安装CocoaPods 基本步骤采用Expo go运行iOS模拟器运行安装在真机上测试发布到苹果商店 原生模块与编译链接问题静态库和 Frameworkuse_frameworks!和use_modular_headers! 常见问题ruby3在macOS上编译失败import of…

bert-vits2本地部署报错疑难问题汇总

环境&#xff1a; bert-vits2.3 win 和wsl 问题描述&#xff1a; bert-vits2本地部署报错疑难问题汇总 解决方案&#xff1a; 问题1: Conda安装requirements里面依赖出现ERROR: No matching distribution found for opencc1.1.6 解决方法 需要在 Python 3.11 上使用 Op…