Vue点击改变属性(改变文字颜色)
<template><div class="tab-control">
<div v-for="(item , index) in title" class="tab-control-item"
:class="{active: index === currentIndex}" @click=\'itemClick(index)\'>
<span>{{item}}</span>
</div>
</div>
</template>
<script>
export default {
name: \'TabControl\',
data:{
title:["新款" , "流行" , "推荐"]
}
}
},
data(){
return{
currentIndex: 0
}
},
methods: {
itemClick(index){
this.currentIndex = index;
this.$emit(\'tabClick\', index)
}
},
}
</script>
<style scoped>
.tab-control{
display: flex;
text-align: center;
font-size: 15px;
height: 40px;
line-height: 40px;
background-color: #fff;
}
.tab-control-item{
flex:1;
}
.tab-control-item span{
padding: 5px;
}
.active{
color: deeppink
}
.active span{
border-bottom: 3px solid deeppink;
}
.tab-control{
position: sticky;
top: 44px
}
</style>
以上是 Vue点击改变属性(改变文字颜色) 的全部内容, 来源链接: utcz.com/z/376307.html