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
}
相关推荐
沙振宇15 分钟前
【Web】使用Vue3开发鸿蒙的HelloWorld!
前端·华为·harmonyos
运维@小兵1 小时前
vue开发用户注册功能
前端·javascript·vue.js
蓝婷儿1 小时前
前端面试每日三题 - Day 30
前端·面试·职场和发展
oMMh1 小时前
使用C# ASP.NET创建一个可以由服务端推送信息至客户端的WEB应用(2)
前端·c#·asp.net
一口一个橘子2 小时前
[ctfshow web入门] web69
前端·web安全·网络安全
读心悦3 小时前
CSS:盒子阴影与渐变完全解析:从基础语法到创意应用
前端·css
香蕉可乐荷包蛋3 小时前
vue数据可视化开发echarts等组件、插件的使用及建议-浅看一下就行
vue.js·信息可视化·echarts
老马啸西风3 小时前
sensitive-word-admin v2.0.0 全新 ui 版本发布!vue+前后端分离
vue.js·ui·ai·nlp·github·word
湛海不过深蓝4 小时前
【ts】defineProps数组的类型声明
前端·javascript·vue.js
layman05284 小时前
vue 中的数据代理
前端·javascript·vue.js