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
}
相关推荐
升鲜宝供应链及收银系统源代码服务4 分钟前
《IntelliJ + Claude Code + Gemini + ChatGPT 实战配置手册升鲜宝》
java·前端·数据库·chatgpt·供应链系统·生鲜配送
i建模21 分钟前
将Edge浏览器的标签页从顶部水平排列**移至左侧垂直侧边栏
前端·edge
跟着珅聪学java26 分钟前
js编写中文转unicode 教程
前端·javascript·数据库
英俊潇洒美少年41 分钟前
Vue3 深入响应式系统
前端·javascript·vue.js
英俊潇洒美少年2 小时前
React 最核心 3 大底层原理:Fiber + Diff + 事件系统
前端·react.js·前端框架
我命由我123452 小时前
React Router 6 - 概述、基础路由、重定向、NavLink、路由表
前端·javascript·react.js·前端框架·ecmascript·html5·js
LJianK12 小时前
java封装
java·前端·数据库
yaaakaaang2 小时前
(四)前端,如此简单!---Promise
前端·javascript
GISer_Jing3 小时前
ReAct规划原理实战指南
前端·react.js·ai·aigc
SoaringHeart3 小时前
Flutter组件封装:翻转组件 NFlipCard
前端·flutter