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  //核心步骤
        }
    }
})
posted @   tingshu  阅读(60)  评论(0编辑  收藏  举报
编辑推荐:
· 如何打造一个高并发系统?
· .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 简明教程
点击右上角即可分享
微信分享提示