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
}
相关推荐
阿珊和她的猫几秒前
Session 与 Cookie 的对比:原理、使用场景与最佳实践
前端·javascript·vue.js
杜子不疼.2 分钟前
SpringBoot + Vue 前后端分离项目实战:权限 + 工作流 + 报表
vue.js·spring boot·后端
Fantasy丶夜雨笙歌6 分钟前
Web 服务基石 Nginx
运维·前端·nginx
敲代码的小吉米11 分钟前
Element Plus 表格中的复制功能使用指南
前端·javascript·elementui
Purgatory00113 分钟前
CSS 访问服务器
服务器·前端·css
昊坤说不出的梦14 分钟前
梳理 Spring Boot Web 开发的几个概念
前端·spring boot·后端
We་ct17 分钟前
LeetCode 103. 二叉树的锯齿形层序遍历:解题思路+代码详解
前端·算法·leetcode·typescript·广度优先
Java面试题总结19 分钟前
Tube - Video Reactions
开发语言·前端·javascript
上海合宙LuatOS19 分钟前
LuatOS核心库API——【json 】json 生成和解析库
java·前端·网络·单片机·嵌入式硬件·物联网·json
阿珊和她的猫24 分钟前
Chrome性能测试关键参数解析
前端·vue.js·chrome