实现选项卡组件vue2.x

实现效果

代码如下：

TabControl.vue

<template>
 <div>
      <div class="tab-control">
      <div v-for='(item,index) in titles' :key='index' :class="{active:index === currentIndex}" @click='tabClick(index)'>
          <span>{
   
   {item}}</span>
      </div>
  </div>
  <div class="item" :class="{show:currentIndex == 0}">
        选项0
      </div>
       <div class="item" :class="{show:currentIndex == 1}">
        选项1
      </div>
       <div class="item" :class="{show:currentIndex == 2}">
        选项2
      </div>
 </div>
</template>

<script>
export default {
name:"TabControl",
props:{
    titles:{
        type:Array,
        default(){
            return []
        }
    },
    content:{
        type:Array,
    }
},
data(){
    return {
        currentIndex:0
    }
},
methods: {
    tabClick(index){
        this.currentIndex = index;
    }
},
}
</script>

<style>
.tab-control{
    width: 300px;
    height: 60px;
    display: flex;
}
.tab-control div{
    flex: 1;
    width: 100px;
    font-size: 20px;
}
.active{
color:red;
}
.item{
    display: none;
}
.show{
    display: block;
}
</style>

App.vue

<template>
  <div id="app">
    <tab-control :titles='["推荐","关注","流行"]'></tab-control>
  </div>
</template>

<script>
import TabControl from './components/TabControl.vue'

export default {
  name: 'App',
  components: {
    TabControl
  }
}
</script>

<style>

</style>