Vue实现tab选项卡切换

最近在做公司的项目，一直用的element ui ，一直用别人写好的ui感觉很无聊。闲来无事自己试着用vue原生写个tab

实现方式一：内容是死内容，不是动态组件时

template部分的代码如下

<div class="main">
	<ul>
         <li v-for="(item,index) in navList" :class="{active:index ==num}" @click="tab(index)">
             {{item}}{{index}}
         </li>
     </ul>
     <div class="tabCon">
         <div v-for="(itemCon,index) in tabContents" v-show="index == num">
             {{itemCon}}{{index}}
         </div>
     </div>
</div>

script部分

 data () {
      return {
        navList:['tab1','tab2','tab3'],
        tabContents:['内容一','内容二','内容三'],
        num:0
      }
  },
  methods:{
      tab (index){
          this.num = index
      }
 }
}

style部分

ul li{
    list-style:none;
    display:inline-block;
    border:1px solid #ccc;
    height:30px;
    line-height:30px;
    width:120px;
    text-align:center;
}
 

实现方式二:

当tab的内容需要传入组件时，可以使用这种方式

template部分

<div class="main">
 <ul class="nav">
     <li v-for="(item,index) in navList" :class = "{active:!(index-menuIndex)}" @click = 'menuShow(index)'><a
             href="#">{{item}}</a></li>
 </ul>
      <div v-show = 'menuIndex == 0'>内容一 <!--此处可以换成子组件--></div>
      <div v-show = 'menuIndex == 1'>内容二 <!--此处可以换成子组件--></div>
      <div v-show = 'menuIndex == 2'>内容三 <!--此处可以换成子组件--></div>
</div>

script部分

export default {
  data () {
      return {
        menuIndex:0,
        navList:['tab1','tab2','tab3'],
      }
  },
  methods:{
     menuShow (index) {
         this.menuIndex = index
         console.log(this.menuIndex)
     }
  }
}

style部分的代码同例子一

实现的效果如下图

————————————————
版权声明：本文为CSDN博主「caimaomaocai」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/caimaomaocai/article/details/86636981