Vue

by Trongnguyen91

HTML

<div id="app">
  <div  class="tab">
    <a href="#" :id="index" v-for="(item,index) in tabs" :class="{'active':index===currentTab}" 
 @click="changeTab(index)">            {{item.name}}
    </a>
  </div>
</div>

CSS

.tab{
  display:flex;
  justify-content:center;
  align-items:center;
  height:50px;
  line-height:50px;
}
.tab a{
  color:#ffffff;
  height:100%;
  width:100%;
  text-align:center;
  background-color:green;
  text-decoration:none;
}
.tab .active{
  color:green;
  background-color:#ffffff;
}

Vue

const tabs=[
  {
    type:'default',
    name:'Home',
  },
  {
    type:'buy',
    name:'Buy',
  },
  {
    type:'rent',
    name:'Rent',
  }
]

new Vue({
  el: "#app",
  data: {
    tabs:tabs,
  	currentTab:0,
  },
  methods: {
    changeTab:function(v){
      this.currentTab=v
    }
  },
  computed:{
  	
  }
})