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
}
相关推荐
LSCLikeApple3 小时前
入门promise
前端
爬楼的猪3 小时前
DeepSeek Harness 本地安装和对话过程的网络问题
前端
labixiong3 小时前
button按钮原生开关弹窗,零 JS 搞定80%交互场景
前端·javascript·html
悟空瞎说3 小时前
Vue3 应用实例 API
前端
隔岸观火烧连营3 小时前
如何用 WebCodecs 在浏览器里实现高清录屏 —— 无插件、无水印、直接导出 MP4
前端·javascript
杉氧3 小时前
页面栈与路由:React Navigation 与 Expo Router 深度实践
android·前端·react native
用户931456355663 小时前
别再满屏 try-catch 了:聊聊异常处理的正确姿势
前端
葡萄城技术团队3 小时前
ERP 内置 BI(上):为什么业务部门还在用 Excel 做分析?
前端
用户64596598710883 小时前
Jenkins CI/CD 实战:Vite 前端发布、Koa + PM2 后端部署、权限隔离与远程发布
前端
deli0070074 小时前
技术案例:使用华为云码道(CodeArts)智能体开发鸿蒙徒步行程记录App
前端