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

<div :class="{active: 'currentKey === key'}"></div>

data() {

    currentKey: 0

},

methods: {

    son(key) {

        this.currentKey =  key

    }

}