How can the data looped out by vue change color to the current one when clicked?

how can the data looped out by vue change color to the current one when clicked?
this is what my page says

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

clipboard.png

data

clipboard.png

clipboard.png

clipboard.png

when I click on one of them, how can I change color in vue? I"ve always written it in jquery

.
Feb.27,2021
You can customize a variable for the data, obtained by

. IsActive, defaults to false,. When you click on it, you can assign the current isActive to true. Bind a class name to the li
< li vsway for = "(item,key) in arr" click= "son (item,key)": class= "{'active': item.isActive}" > {{item}


data:index:0


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

).

add a 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;
}

<div :class="{active: 'currentKey === key'}"></div>
data() {
    currentKey: 0
},
methods: {
    son(key) {
        this.currentKey =  key
    }
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bcdfc8-30409.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bcdfc8-30409.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?