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
}
相关推荐
weixin_39757409几秒前
AgentRAG与ReAct推理链:从检索增强到推理增强
前端·react.js·前端框架
想要狠赚笔的小燕11 分钟前
vue项目的入口文件是什么 main.js还是index.html,他俩有啥区别
前端·javascript
Jiude13 分钟前
AI面对真机调试也束手无策?我将方法论形成了一套SKILL 🛠️🤖
前端·后端·测试
之歆25 分钟前
Day02_ES6+ 核心特性深度解析:现代 JavaScript 开发的基石
前端·javascript·es6
问心无愧051326 分钟前
ctf show web入门71
android·前端·笔记
light blue bird35 分钟前
支组汇总主子节点工序路径图表
前端·jvm·.net·桌面端·gdi绘图
小KK_1 小时前
新手必看篇——JS类型判断
前端·javascript
小小高不懂写代码1 小时前
Vibe Coding时代的自我鞭策
前端·人工智能
喵个咪1 小时前
基于 Nuxt 4 的现代 Headless CMS 前端:架构深度解析与二次开发指南
前端·vue.js·nuxt.js
AI科技星1 小时前
万有引力G与真空介电常数ε0全维度完整关系式汇编(基于v=c螺旋时空理论)
c语言·开发语言·前端·javascript·网络·汇编·electron