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
}
相关推荐
FITA阿泽要努力1 分钟前
第1周·第2讲|一道综合代码推演
服务器·前端·python·agent.
iCxhust2 分钟前
如何批量导出edge保存的密码
前端·windows·edge
JarvanMo4 分钟前
写 Flutter 不用再套六层 Widget 了
前端
小羊没烦恼!11 分钟前
关于大型asp.net应用系统的架构-架构的选择
java·服务器·开发语言·前端·c#
GISer_Jing17 分钟前
height、line-height、font-size相同字体遮挡问题
前端·ai
字节渡客22 分钟前
接口参数偶尔丢失、乱码、解析失败,不是前端传参问题
前端
夏幻灵23 分钟前
前端八股:JavaScript 深拷贝详解:实现方式、递归原理与循环引用
开发语言·前端·javascript
@#¥&~是乱码鱼啦29 分钟前
ArkWeb开发手记01|Web 组件 H5 加载与生命周期管理
前端
suaizai_30 分钟前
ComputerUse:让AI真正操控桌面系统
java·前端·javascript
CodeSheep37 分钟前
朋友面试谈薪报价2w,HR非得压到1.9,还反问他:你就差这1000块钱?后来背调时问了他前同事十几个问题,对方最后直接挂了
前端·后端·程序员