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
}
相关推荐
JS_GGbond11 分钟前
JavaScript原型链:一份会“遗传”的家族传家宝
前端·javascript
前端达人11 分钟前
CSS终于不再是痛点:2026年这7个特性让你删掉一半JavaScript
开发语言·前端·javascript·css·ecmascript
JS_GGbond16 分钟前
当JS拷贝玩起了“俄罗斯套娃”:深拷贝与浅拷贝的趣味对决
前端·javascript
code_YuJun18 分钟前
脚手架开发工具——npmlog
前端
donecoding19 分钟前
掌握 :focus-within,让你的AI对话输入体验更上一层楼!
前端·人工智能
快乐星球喂19 分钟前
使用nrm管理镜像
前端
用户40993225021220 分钟前
Vue3动态样式管理:如何混合class/style绑定、穿透scoped并优化性能?
前端·ai编程·trae
小徐不会敲代码~23 分钟前
Vue3 学习2
前端·javascript·学习
m0_7400437325 分钟前
Vue2 语法糖简洁指南
前端·javascript·vue.js