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
}
相关推荐
小江的记录本几秒前
【Swagger】Swagger系统性知识体系全方位结构化总结
java·前端·后端·python·mysql·spring·docker
Moshow郑锴7 分钟前
npm国内镜像加速之使用 nrm 工具(灵活切换,适合多环境)
前端·npm·node.js
flytam9 分钟前
Claude Agent SDK 深度入门指南 审核中
前端·人工智能·aigc
你猜猜吧11 分钟前
里程三:DSL总结
前端
JarvanMo11 分钟前
当 Flutter 撞上 3D 性能之墙 —— Fluorite(萤石)
前端
Eagle_Clark11 分钟前
从0到1 Vibe Coding 一个项目的真实感受
前端·人工智能·后端
CodeSheep12 分钟前
兄弟被降职降薪,被猎头挖新公司时承诺45万年薪,结果签合同才发现这45万里有“部分”是股权激励,还得2年后才能兑现
前端·后端·程序员
weixin1997010801619 分钟前
《界面网商品详情页前端性能优化实战》
前端·性能优化
Mintopia27 分钟前
界面上的小细节,决定用户会不会骂产品
前端
cch891829 分钟前
ThinkPHP6.x全面升级:性能与功能双飞跃
开发语言·vue.js·后端·golang