Vue点击改变属性(改变文字颜色)

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

回到顶部