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
}
相关推荐
布鲁飞丝27 分钟前
从零实现富文本编辑器#-浏览器选区与编辑器选区模型同步
java·前端·编辑器
写不来代码的草莓熊35 分钟前
Cesium 地图交互绘制圆形、多边形
前端·javascript·地图
weixin_4277716144 分钟前
前端版本检测
前端
禅思院1 小时前
流式 Markdown 渲染完全指南【引子】
前端·架构·前端框架
JackSparrow4141 小时前
前端安全之JS混淆+请求加密+请求签名以提升爬虫难度
前端·javascript·后端·爬虫·python·安全
IMPYLH2 小时前
HTML 的 <em> 元素
java·前端·html
看昭奚恤哭2 小时前
基于 RuoYi-Vue-Pro 定制了一个后台管理系统 magic-admin , 开源出来!
前端·vue.js·开源
名为沙丁鱼的猫7294 小时前
【审计日志组件实践复盘】前端工程化 + 后端DDD架构(AOP切面拦截日志) + MBG
前端·架构
xqqxqxxq4 小时前
AI智能旅游规划系统 - 前端技术笔记
前端·笔记·旅游
陈随易10 小时前
bm2,MoonBit实现的pm2替代品
前端·后端·程序员