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
}
相关推荐
xiaozenbin4 分钟前
关于tomcat9页面部分乱码的处理
前端·tomcat·firefox
ethan.Yin4 分钟前
element-plus 二次封装遇到的一点疑惑
javascript·vue.js·ecmascript
Ulyanov12 分钟前
Impress.js 3D立方体旋转个人年终总结设计与实现
开发语言·前端·javascript·3d·gui开发
榴莲不好吃13 分钟前
前端js图片压缩
开发语言·前端·javascript
切糕师学AI20 分钟前
Vue 中的 keep-alive 组件
前端·javascript·vue.js
可问春风_ren29 分钟前
Git命令大全
前端·javascript·git·后端
她说彩礼65万32 分钟前
Jquery总结
前端·javascript·jquery
得一录34 分钟前
ES6核心语法
前端·ecmascript·es6
光影少年38 分钟前
前端如何定位组件变化及性能问题
前端·javascript·react.js
芳草萋萋鹦鹉洲哦1 小时前
【Vue 3/Vite】Tailwind CSS稳定版安装替代CDN引入
前端·css·vue.js