结构
<div class="hello">
<div class="div-box">
<div v-for="(item,i) in head" :key="i" @click="clickIndex(i)">
<div class="div-box1">
<span :class="[i == indexs ? 'div-span' : '']">{{item}}</span>
<span :class="[i == indexs ? 'div-span1' : '']"></span>
</div>
</div>
</div>
</div>
css
.div-box{
display: flex;
width: 1200px;
margin: 0 auto;
height: 50px;
}
.div-box>div{
margin: 0 15px;
}
.div-span{
color: rgba(255, 101, 61);
}
.div-box1{
display: flex;
flex-direction: column;
align-items: center;
}
.div-span1{
display: block;
height: 2px;
width: 30px;
border: 1px solid #ccc;
background-color:rgba(255, 77, 17) ;
margin-top: 5px;
}
vue 逻辑
export default {
name: 'Home',
data(){
return {
list:['首页','会员专享','特价专区','租号大厅','电竞陪玩','找代练','账号交易','登号教程','帮助中心']
,
indexs:0
}
},
methods:{
clickIndex(e){
console.log(e);
this.indexs = e
}
}
}
