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
}
相关推荐
Vuji1 分钟前
Pi 插件解剖|summarize.ts:199 行,给 Agent 的对话做一份 Markdown 总结
前端·人工智能·agent
逻辑帧6 分钟前
给 AI 时代找工作的同学一些实用建议
前端·后端
蜡台25 分钟前
Jetpack Compose 从入门到精通
android·前端·kotlin·compose·jepack
学习星球1 小时前
Astro 全栈实战:拆解 RealWorld 项目
前端·javascript·架构·系统架构·前端框架·c5全栈
尚可签1 小时前
基于 Spring Boot + Vue 的 AI 智能在线订餐系统
vue.js·人工智能·spring boot
软件开发JR1 小时前
基于Web的足球青训俱乐部管理后台系统的设计与开发
java·前端·spring boot·毕业设计
那年窗外下的雪.2 小时前
VXLAN EVPN 分层排障:从 VTEP 可达、ARP/MAC 到 MAC Mobility
服务器·前端·网络·数据库·spine
禁止摆烂_才浅3 小时前
JavaScript 类型判断:instanceof 与 constructor 原理深度解析
前端·javascript·面试
gezg3 小时前
DeepSeek Harness 插件:Excel 拖进输入框,AI 自己去读文件
前端·ai编程
Asize3 小时前
HTTP 明明无状态,登录态怎么就保住了——React + Zustand + JWT 鉴权全流程拆解
前端·javascript