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
}
相关推荐
IT_陈寒7 分钟前
Java Stream并行流的坑:我花了3小时才找到的线程安全问题
前端·人工智能·后端
小新1108 分钟前
最简单但完整的 Vue 响应式示例(一个简单的计数器按钮)
前端·javascript·vue.js
鹿青1 小时前
给设计稿做体检:我搓了个 Skill,专治 Figma 转代码出垃圾
前端·claude·视觉设计
刘海不能乱161 小时前
Java JUC源码分析系列笔记-Synchronized
vue.js
陈_杨1 小时前
鸿蒙APP开发:足球战术App怎么做拖拽交互?球员拖动与路线绘制
前端
陈_杨1 小时前
鸿蒙APP开发:如果你想在鸿蒙App里做属性动画,@ohos.animator怎么用
前端
陈_杨1 小时前
鸿蒙APP开发:篮球App怎么画球场?鸿蒙Canvas绘图实战
前端
colofullove1 小时前
前端工程搭建与用户访问流程设计
前端
广州华水科技1 小时前
如何利用单北斗GNSS系统实现大坝的变形监测?
前端
代码小库2 小时前
【2026前端最新面试题——day10】JavaScript 高频面试题
开发语言·前端·javascript