Vue tabs

HTML

<div id="vue">
  <a v-for="name, i in stuff" @click="current = i" :class="{current:i == current}">{{name}}</a>
  <div>
    {{stuff[current]}}
  </div>
</div>

CSS

a{
  display:inline-block;
  padding:10px;
  background:rgb(53,73,94);
  color:white;
  cursor:pointer;
  transition:0.2s;
}
a:hover{
  transform:scale(1.2);
  box-shadow:1px 1px 3px rgba(0,0,0,0.5);
  transition:all 0s, background 0.2s;
  z-index:10;
}
.current{
  background:rgb(56,184,131);
}
div{
  padding:10px;
  background:white;
}

JavaScript

new Vue({
  el: '#vue',
  data(){
  	return {
    	current:1,
      stuff:['lorems','ipsum','dolor','sit','amen','consectetur','adipiscing','elit']
    }
  }
})