vue 点击高亮 最简便的做法

<template>
<div class="testWebGL pd15" id="threeBox">
	<div class="clearfix tabsBox">
		<div class="fl tabItem" v-for="(item,index) in tabList" :key="'tab'+index" @click="tabClick(index)" :class="{'active':activeTab==index}">{{item}}</div>
	</div>
	<div v-show="activeTab==0">
		tab1的内容
	</div>
</div>
</template>
<script>
export default{
	data(){
		return{
			tabList:[
				'tab1',
				'tab2',
				'tab3',
				'tab4',
				'tab5',
			],
			activeTab:0,
		}
	},
	methods:{
		tabClick(index){
			this.activeTab = index
		},
		
	},
}
</script>
<style lang="scss" scoped>
.testWebGL{
	height:100vh;
	position:relative;
	.tabsBox{
		border-bottom:2px solid #ccc;
		line-height:30px;
		.tabItem{
			width:150px;
			cursor:pointer;
			text-align:center;
			&:hover{
				color:blue;
			}
			&.active{
				color:blue;
				position:relative;
				&:after{
					content:'';
					display:block;
					width:50px;
					height:2px;
					background:blue;
					position:absolute;
					left:50px;
					bottom:-2px;
				}
			}
		}
	}
}	
</style>

关键是 

tabClick(index) {
            this.activeTab = index
        },