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" >&nbsp; &nbsp; <li v-on:click="currentIndex = index" class="controller-checkbox-item" v-bind:class="{clicked: index === currentIndex}" v-for="(ctrlValue, index) in desc.args">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a>{{ctrlValue}}</a>&nbsp; &nbsp; </li></ul>data(){&nbsp; &nbsp; return{&nbsp; &nbsp; &nbsp; &nbsp; currentIndex: 0&nbsp; &nbsp; }}通过遍历序号进行判定即可