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
}
相关推荐
Jodie同志1 分钟前
第1~15天:原生Agent、RAG与LangGraph基础(完整代码实操)
前端·后端·agent
sunly_3 分钟前
React useActionState 的用法详解
前端·javascript·react.js
今日无bug4 分钟前
RESTful + Interface:从 todos 项目理解后端接口设计
前端·restful
用户693717500138413 分钟前
#DeepSeek+Pi‑Agent 王炸组合跑赢 Claude‑Code!
前端·人工智能·后端
前端一课29 分钟前
我还在上班,怎么做一个长期有价值的号
前端
前端一课41 分钟前
用 TRAE Work 把项目踩坑经验沉淀成「团队可复用工程规范」,新人再也不重复掉坑
前端·后端
cyadyx1 小时前
【Three.js】Three.js 中加载 3D 模型
前端·javascript·3d
汉堡大王95271 小时前
前端工程师 TypeScript 上手指南:一条清晰的从入门到精通路线
前端·javascript·react.js
浅水壁虎1 小时前
vue基础(第四章 Pinia)
前端·javascript·vue.js
用户2181697049301 小时前
Flutter (十四) SingleChildScrollView ListView
前端