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
    }
}

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

Answer 2

回來看一下才看清楚不是要多選而是單選，改了下：

看起來你好像把狀態寫成使用同一個變量...

應該是要把狀態定義在每個 desc.args

data() {
  return {
    desc: {
       args: [
          {
            selected: false
            // ...略  
          }
       ]
    }
  }
},
methods: {
  select(index) {
    this.desc.args.map( a => a.selected = false )
    this.desc.args[index].selected = true
  }
}

<li @click="select(index)" class="controller-checkbox-item" :class="ctrlValue.selected ? 'active' : ''" v-for="(ctrlValue, index) in desc.args">
    <a>{{ctrlValue}}</a>
</li>

大致上是這樣。

Answer 3

v-class

Answer 4

根据index索引值以及预先定义的变量值进行判断，如果相等自动添加active
https://jsfiddle.net/zhoou/d6...