开始用的css伪类li:active,发现点击之后确实会变色;但是只有鼠标点下去那一瞬间会变色,当鼠标点完之后,效果就消失了。发现只用css还是不行
实现代码
<div class="topic-list-box-top">
<ul class="tag-list">
<li v-for="(item,index) in topicClass" :key="index" :class="selectedIndex == index ? 'active':''" @click="getTopic(index, item.topicClassId)">
<a><span>{{ item.topicClassName }}</span></a>
</li>
</ul>
</div>
css
li.active {
background-color: #FFBF00;
span {
color: #FFFFFF;
}
}
data
selectedIndex: 0
methods
getTopic(index, id) {
this.selectedIndex = index;
}