<ul>
<li v-for="(item, index) in movies" v-bind:class="{active: keyVal === index}" v-on:click="tabShift(index)">
{{item}}</li>
</ul>
<div v-show="keyVal == 0">tab 1 content </div>
<div v-show="keyVal == 1">tab 2 content </div>
<div v-show="keyVal == 2">tab 3 content </div>
<script>
const vue = new Vue({
el: '#app',
data: {
counter: 0,
movies: ["tab1", "tab2", "tab3"],
keyVal: 0
},
methods: {
tabShift: function(val) {
this.keyVal = val;
}
}
});
</script>