<template>
<div id="Furong">
<div class="tab-control">
<div v-for="(item, index) in titles" class="tab-control-item" :class="{active: isActive == index}"
@click="onClick(index)">
<span>{{item}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Furong',
data() {
return {
msg: 'hello furong!',
titles: ['流行', '新款', '精选'],
isActive: 0
}
},
methods: {
onClick(index) {
console.log("onClick");
this.isActive = index;
}
}
}
</script>
<style>
.tab-control {
display: flex;
background-color: orange;
}
.tab-control-item {
flex: 1;
height: 40px;
line-height: 40px;
}
.active {
color: orangered;
}
.tab-control-item>span {
padding: 5px;
}
.active>span {
border-bottom: 3px solid orangered;
}
</style>
![](https://img2020.cnblogs.com/blog/1747317/202107/1747317-20210719112059518-948005259.png)