vue循环出来的数据，怎么点击的时候，给当前的变色呢？

Question

vue循环出来的数据，怎么点击的时候，给当前的变色呢？
我页面是这样写的

       <ol v-if="tooglezhi" class="ol_one">
                        <li v-for="(item,key) in arr" 
                               @click="son(item,key)"><span></span>{{item}}</li>
                    </ol>

在data中

我想要的效果是

我点击其中一个的时候 其中的变色，怎么用vue实现呢 我之前一直是用jquery写的

Answer 1

获取到的data，你可以自定义个变量，isActive，默认都是false,当你点击的时候，给当前这个isActive赋值为true就可以了，li上在绑定一个class名
<li v-for="(item,key) in arr" click="son(item,key)" :class="{'active': item.isActive}"><span></span>{{item}}</li>

Answer 2

data:index:0


<li v-for="(item,key) in arr" @click="key=index" :class="key==index?'active':''"><span></span>{{item}}</li>

Answer 3

加一个class:

<li v-for="(item,key) in arr"  @click="son(item,key)" :class='key==selected?"selected":""'><span></span>{{item}}</li>

data(){
    return{
        selected:-1
    }
},
methods:{
    son(item,key){
        this.selected=key;
    }
}

.selected{
    color:red;
}

Answer 4

<div :class="{active: 'currentKey === key'}"></div>
data() {
    currentKey: 0
},
methods: {
    son(key) {
        this.currentKey =  key
    }
}