<template>
<div class="top">
<ul class="tabList clearfixh">
<li @click="tabClick(item.id)" :key="index" :class="['tabli',{active:item.id===selData}]" v-for="(item,index) in dataAll">{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
selData: '1',
dataAll:[
{name: 'xx1',id: '1'},
{name: 'xx2',id: '2'},
{name: 'xx3',id: '3'},
{name: 'xx4',id: '4'}
]
}
},
methods: {
tabClick(id) {
this.selData = id;
}
},
mounted() {
}
}
</script>
<style scoped>
.top {
width: 100%;
}
.tabli {
height: 20px;
text-align: center;
line-height: 20px;
font-size: 14px;
display: inline-block;
margin: 0 10px;
}
.active {
font-weight: bold;
border-bottom: 2px solid rgb(13, 233, 222);
}
.tabli:nth-child(1){
margin-left: 0;
}
.tabli:last-child{
margin-right: 0;
}
</style>
