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
}
相关推荐
Moment3 分钟前
Cursor 的 5 种指令方法比较,你最喜欢哪一种?
前端·后端·github
IT_陈寒7 分钟前
Vite快得离谱?揭秘它比Webpack快10倍的5个核心原理
前端·人工智能·后端
明月_清风1 小时前
性能级目录同步:IntersectionObserver 实战
前端·javascript
明月_清风1 小时前
告别暴力轮询:深度解锁浏览器“观察者家族”
前端·javascript
摸鱼的春哥1 小时前
Agent教程17:LangChain的持久化和人工干预
前端·javascript·后端
程序员爱钓鱼2 小时前
Go操作Excel实战详解:github.com/xuri/excelize/v2
前端·后端·go
子兮曰10 小时前
async/await高级模式:async迭代器、错误边界与并发控制
前端·javascript·github
恋猫de小郭11 小时前
2026 Flutter VS React Native ,同时在 AI 时代 VS Native 开发,你没见过的版本
android·前端·flutter
GIS之路13 小时前
ArcGIS Pro 中的 Notebooks 入门
前端
IT_陈寒14 小时前
React状态管理终极对决:Redux vs Context API谁更胜一筹?
前端·人工智能·后端