当前位置: 首页 > article >正文

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
}

在这里插入图片描述


http://www.kler.cn/a/235024.html

相关文章:

  • SLURM资料
  • 计算机基础 试题
  • pycharm debug
  • 功能篇:JAVA8实现数据去重
  • 告别机器人味:如何让ChatGPT写出有灵魂的内容
  • 感知机与逻辑回归的异同点
  • C语言每日一题(55)另一颗树的子树
  • 《UE5_C++多人TPS完整教程》学习笔记5 ——《P6 在线子系统(Online Subsystem)》
  • [算法学习] 唯一分解定理
  • 批量提取word文件中文本框内容的三种方法
  • Go基础学习笔记-知识点
  • 速盾:怎么拿高防服务器做CDN
  • springBoot,springSecurity返回乱码
  • Linux系统调试课:Linux错误码介绍
  • system V——进程间通信
  • 大模型学习 一
  • 软件架构与系统架构:区别与联系的分析
  • 跟踪分析一款新型Megahorse窃密木马
  • RabbitMQ之五种消息模型
  • 一、基础数据结构——2.队列——3.双端队列和单调队列2
  • 学习Android的第十天
  • JVM的主要组成部分,以及它们的作用。JVM中的内存区域有哪些,它们各自的作用是什么?什么是Java的堆内存,它如何影响程序的性能?
  • 鸿蒙harmony--TypeScript对象详解
  • Android录音功能的实现及踩坑记录
  • BIO、NIO、Netty演化总结
  • JavaScript DOM 变动观察器(Mutation observer)