v-for产生的列表。用v-bind绑定属性，如何实现active的切换

Question

如题，我想实现点击某个li时，添加active效果，别的为默认样式；当点击另一个是，原来的active回去默认样式。用vue该如何实现？我的代码如下，但是会全部一起被加上或移除active    <ul class="controller-checkboxs clearfix" >            <li v-on:click="clicked=!clicked" class="controller-checkbox-item" v-bind:class="clicked?'active':''" v-for="ctrlValue in desc.args">                    <a>{{ctrlValue}}</a>            </li>    </ul>点击后：

Answer 1

<ul class="controller-checkboxs clearfix" >

    <li v-on:click="currentIndex = index" class="controller-checkbox-item" v-bind:class="{clicked: index === currentIndex}" v-for="(ctrlValue, index) in desc.args">

                    <a>{{ctrlValue}}</a>

    </li>

</ul>

data(){

    return{

        currentIndex: 0

    }

}

通过遍历序号进行判定即可