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
}
相关推荐
跟着珅聪学java26 分钟前
vue通过spring boot 下载文件教程
前端·spring boot·后端
码侯烧酒1 小时前
前端IM应用开发中的难点解析与总结
前端·websocket
非专业程序员2 小时前
逆向分析CoreText中的字体级联/Font Fallback机制
前端·ios
我的写法有点潮2 小时前
彻底理解 JavaScript 的深浅拷贝
前端·javascript·vue.js
Holin_浩霖2 小时前
前端原型与继承全景学习图解版
前端
palpitation972 小时前
iOS Universal Link 配置
前端
csgo打的菜又爱玩2 小时前
Vue 学习与实践大纲(后端视角)
前端·学习
柯南二号3 小时前
【大前端】Vue 和 React 的区别详解 —— 两大前端框架深度对比
前端·vue.js·前端框架
IT_陈寒3 小时前
「Redis性能翻倍的5个核心优化策略:从数据结构选择到持久化配置全解析」
前端·人工智能·后端
weixin_446938873 小时前
uniapp vue-i18n如何使用
前端·vue.js·uni-app