VUE实现选中后变色并且效果不消失

开始用的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;
}