tab栏切换-前端
vue场景
原理:通过类名操作元素显示与隐藏
<div class="head">
<ul>
<li :class="currentIndex==index?'active':''" :key="item.id" v-for="(item,index) in list" v-on:click="change(index)">{{item.title}}</li>
</ul>
</div>
<div class="body">
<img :class="currentIndex==index?'current':''" :key="item.id" :key="item.id" v-for="(item,index) in list" :src="item.path" alt="" class="one">
</div>
var vm = new Vue({
el:'#app',
data:{
currentIndex:'0',
list:[{
id:1,
title:'one',
path:'images/main.png'
},
{
id:2,
title:'two',
path:'images/quan.png'
},
{
id:3,
title:'three',
path:'images/account.png'
},]
},
methods:{
change:function (index) {
this.currentIndex = index //核心步骤
}
}
})
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp
· drools 规则引擎和 solon-flow 哪个好?solon-flow 简明教程