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
}
相关推荐
codingWhat21 小时前
前端组件库开发实践:从零到发布
前端·npm·vite
cxxcode21 小时前
浏览器模块加载与 Webpack 打包原理
前端
兆子龙21 小时前
React Compiler 来了:少写 useMemo,照样稳
前端·架构
用户54330814419421 小时前
Manifest V3 实战:从补天网站逆向到 Chrome 扩展开发全记录
前端·后端
zhqiok21 小时前
React中类似于Vue中Pinia的轻量级状态管理神器——Zustand
前端
Mintopia21 小时前
促成高端技术方案形成的关键要素与实践路径
前端
摸鱼的春哥1 天前
春哥的Agent通关秘籍13:实现RAG查询
前端·javascript·后端
明月_清风1 天前
滚动锁定:用户向上翻看历史时,如何阻止 AI 新消息把它“顶”下去?
前端·javascript
明月_清风1 天前
当高阶函数遇到 AI:如何自动化生成业务层面的逻辑拦截器
前端·javascript·函数式编程
moshuying1 天前
别让AI焦虑,偷走你本该有的底气
前端·人工智能