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
}
相关推荐
启山智软2 分钟前
【使用 Java(JSP)实现的简单商城页面前端示例】
java·前端·商城开发
Qlittleboy5 分钟前
TP5.0的“请求缓存”,把页面缓存为静态HTML文件,提升加载速度
前端·缓存·html·php
Doris8937 分钟前
【Node.js 】Node.js 与 Webpack 模块化工程化入门指南
前端·webpack·node.js
爱学习的程序媛7 分钟前
【Web前端】“十五五”重大项目中的前端机遇
前端·科技·信息可视化·前端框架·创业创新·信息与通信
始持8 分钟前
第十二讲 风格与主题统一
前端·flutter
小码哥_常8 分钟前
Room 3.0大变身:安卓开发的新挑战与机遇
前端
法欧特斯卡雷特8 分钟前
Kotlin 2.3.20 现已发布,来看看!
android·前端·后端
Wect9 分钟前
LeetCode 53. 最大子数组和:两种高效解法(动态规划+分治)
前端·算法·typescript
始持10 分钟前
第十三讲 异步操作与异步构建
前端·flutter
读忆26 分钟前
解决 `:first-child` / `:last-child` 不生效的问题
前端·css·vue.js·css3