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
}
相关推荐
阿鑫_996几秒前
通用-Nvm基础知识
前端
xinzheng新政6 分钟前
Javascript·深入学习基础知识
前端·javascript·学习
前端付豪25 分钟前
实现记忆开关
前端·后端
前端开发呀29 分钟前
约定式路由的极简主义实践:一个插件搞定 React/Vue × Vite/Rspack
前端
代码煮茶30 分钟前
Vue3 插件开发实战 | 从 0 开发一个全局通知组件(Toast/Message)并发布到 npm
javascript·vue.js
我就是马云飞35 分钟前
停更5年后,我为什么重新开始写技术内容了
android·前端·程序员
品克缤43 分钟前
Vue3 + Router 页面切换时滚动条闪烁问题记录
前端·javascript·css·vue.js
walking95744 分钟前
Linux-从0开始-20260408
linux·前端·面试
PILIPALAPENG44 分钟前
第1周 Day 5:前端转型AI,回顾总结🎯
前端·人工智能·python
前端老石人1 小时前
文本级语义与变更标记
前端·html