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 分钟前
如果我一个前端页面要被用户看到,原理是什么,用户怎么通过网址就看到页面的,这背后要怎么弄
前端
迅猛龙办公室8 分钟前
Python实现获取星期字符串
java·前端·python
小小荧10 分钟前
🚀 Node.js 之父离开 Deno,带着整个团队加入了 Cloudflare
前端·node.js
IllegalCreed10 分钟前
人中吕布,卡中 Blackwell:我用三国志14的数值给 687 个大模型排了座位
前端
troy12811 分钟前
Java Web 常见面试题(2026 最新整理)
java·前端·hive
Data analyse45617 分钟前
数据埋点设计的事件命名规则校验
服务器·前端·数据分析
溪语流沙33 分钟前
【Web全栈进阶】OAuth实战——GitHub第三方登录
前端·python·github
小陈运维33 分钟前
微WEB文件服务 Docker 部署指南
前端·docker·容器
lichenyang45334 分钟前
从 Prettier 开始整理前端开发常用命令
前端