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() {&nbsp; &nbsp; currentKey: 0},methods: {&nbsp; &nbsp; son(key) {&nbsp; &nbsp; &nbsp; &nbsp; this.currentKey =&nbsp; key&nbsp; &nbsp; }}