tab bar component encapsulation

method 1: 

<template>
  <div class="container">
    <div class="tabs">
      <div class="tab" @click="handClick(0)">关注</div>
      <div class="tab" @click="handClick(1)">推荐</div>
      <div class="tab" @click="handClick(2)">历史</div>
      <div class="tab" @click="handClick(3)">汽车</div>
    </div>
    <div class="tab-contents">
      <div class="tab-content" v-show="activeIndex === 0">你的关注内容</div>
      <div class="tab-content" v-show="activeIndex === 1">为你推荐一段视频</div>
      <div class="tab-content" v-show="activeIndex === 2">历史内容</div>
      <div class="tab-content" v-show="activeIndex === 3">电动车的未来</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tab2",
  data() {
    return {
      activeIndex: 0,
    };
  },
  methods:{
    handClick( val ) {
      this.activeIndex = val
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  cursor: pointer;
  .tabs {
    display: flex;
    margin-bottom: 20px;
    .tab {
      margin-right: 20px;
    }
  }
  .tab-contents {
    display: flex;
    // .tab-content {
    //   display: none;
    // }
  }
}
</style>

Method 2:

<template>
  <div class="container">
    <div class="tabs">
      <div class="tab" v-for="(item,index) in list" :key="index" @click="activeIndex = index">{
   
   {item.name}}</div>
      
    </div>
    <div class="tab-contents">
      <div class="tab-content" v-for="(item,index) in tabList" :key="index" v-show="activeIndex === index">{
   
   {item.name}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "tab2",
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          id: 1,
          name: "关注",
        },
        {
          id: 2,
          name: "推荐",
        },
        {
          id: 3,
          name: "历史",
        },
        {
          id: 4,
          name: "汽车",
        },
      ],
      tabList:[
        {
          id:1,
          name:'你的关注内容',
        }, {
          id:2,
          name:'为你推荐一段视频',
        }, {
          id:3,
          name:'历史内容',
        }, {
          id:4,
          name:'电动车的未来',
        },
      ]
    };
  },
  methods:{
    // handClick( val ) {
    //   this.activeIndex = val
    // }
  }
};
</script>

<style lang="less" scoped>
.container {
  cursor: pointer;
  .tabs {
    display: flex;
    margin-bottom: 20px;
    .tab {
      margin-right: 20px;
    }
  }
  .tab-contents {
    display: flex;
    // .tab-content {
    //   display: none;
    // }
  }
}
</style>