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
}
相关推荐
木斯佳1 分钟前
前端八股文面经大全:腾讯PCG暑期前端一面(2026-04-01)·面经深度解析
前端·算法·面经·计算机原理
freewlt5 分钟前
前端性能优化实战指南:从 3s 到 0.5s 的加载提速之路
前端·性能优化
qq_429499575 分钟前
从LVGL标签读取数据转为变量
前端·javascript·vue.js
freewlt7 分钟前
Vue3 + TypeScript 项目架构设计:从 0 搭建企业级前端工程
前端·javascript·typescript
happymaker06261 小时前
vue的声明周期、钩子函数、工程化开发
前端·javascript·vue.js
Irene19914 小时前
ElementPlus 与成熟后台框架对比:vue-element-plus-admin、vue-pure-admin等
前端·ui·框架·vue3
尘中客8 小时前
放弃 Echarts?前端直接渲染后端高精度 SVG 矢量图流的踩坑记录
前端·javascript·echarts·前端开发·svg矢量图·echarts避坑
FreeBuf_8 小时前
Chrome 0Day漏洞遭野外利用
前端·chrome
小彭努力中9 小时前
199.Vue3 + OpenLayers 实现:点击 / 拖动地图播放音频
前端·vue.js·音视频·openlayers·animate
2501_916007479 小时前
网站爬虫原理,基于浏览器点击行为还原可接口请求
前端·javascript·爬虫·ios·小程序·uni-app·iphone