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
}
相关推荐
Ulyanov4 分钟前
打造现代化雷达电子对抗仿真界面 第二篇:雷达电子对抗仿真系统核心功能实现
前端·python·信息可视化·数据可视化·系统仿真·雷达电子战
快乐小土豆~~5 分钟前
上传视频时截取正脸照片
前端·音视频·vladmandic
276695829216 分钟前
token1005 算法分析
java·前端·javascript·token·token1005·携程酒店·token算法分析
乆夨(jiuze)16 分钟前
记录一个css,实现下划线内容显示,支持文本多行显示
前端·css
GISer_Jing18 分钟前
前端视频多模态:编解码、传输、渲染全链路详解
前端·人工智能·音视频
恋猫de小郭26 分钟前
Flutter PC 多窗口最新进展,底层原生窗口句柄支持已合并
android·前端·flutter
LIO39 分钟前
Vue3 + Vite + Pinia + TypeScript 项目完整搭建与实战指南
前端·vue.js
kilito_0140 分钟前
vue官网例子 讲解2
前端·javascript·vue.js
蜡台40 分钟前
Vue实现动态路由
前端·javascript·vue.js·router
xiao阿娜的妙妙屋11 小时前
当AI Agent开始自我进化,我们普通人应该怎么办?
前端