zoukankan      html  css  js  c++  java
  • vue实现tab切换功能

    最近用vue做一个页面的tab功能,经过一查找资料,没用路由,也没用动态组件,完美实现了tab切换功能,效果如下

    下面是代码实现,这是模板

    <article id="example" class="wrap">
        <div class="tab_area">
            <ul class="tab_tit">
            <li v-for="(tab,index) in tabs" :class="{tab_tit_cur:curtab==index}" @click="toggletab(index)" v-html="tab.title"></li>
              </ul>
        </div>
        <Owncard v-show="isShowOwnCards" :owncards="owncards"></Owncard>
        <Noowncard v-show="!isShowOwnCards" :no-owncards="noOwncards"></Noowncard>
        <Addcard v-show="isShowOwnCards"></Addcard>
    </article>
    这是根组件的js实现,由于只讲tab实现,子组件的代码就不贴出来了
    var vm=new Vue({
    el: '#example',
    data: {
         tabs:[{id:0,title:"本人",iscurTab:true},{id:1,title:"非本人",iscurTab:false}], //tab项 curtab:0, //当前被选择tab标识,用来渲染tab选中样式 isShowOwnCards:true //用来渲染tab对应的内容块 },
      components:{
        Owncard:owncard, //本人tab展示模块
        Noowncard:noOwncard, //非本人tab展示模块
        Addcard: addcard, //只在本人模块下显示的添加按钮
      },
      methods:{ toggletab: function(index){ this.curtab=index; //将选中的tab的index赋给curtab,基于vue双向绑定,tab的样式会改变 if(index==0){ //用来设置相应内容块是否显示标识 this.isShowOwnCards=true; //本人组件显示 }else{ this.isShowOwnCards=false; //非本人组件显示 } } } })
    
    
  • 相关阅读:
    宠物小精灵之收服(dp)
    装箱问题(dp)
    背包问题(采药)
    导弹防御系统(dfs+贪心)
    2018091-2 博客作业
    第一周例行报告
    洛谷 P6378 [PA2010]Riddle
    洛谷 P5782 [POI2001]和平委员会
    洛谷 P3825 [NOI2017]游戏
    POJ 3683 Priest John's Busiest Day
  • 原文地址:https://www.cnblogs.com/wxcbg/p/9341089.html
Copyright © 2011-2022 走看看