How does the li click event of vue bind to the class name?

template code is

<div class="news_title" v-on:click="news_title" >
    <ul>
        <li class="news_active" type1="0"></li>
        <li type1="1"></li>
        <li type1="2"></li>
        <li type1="3"></li>
        <li type1="4"></li>
        <li type1="5"></li>
        <li type1="6"></li>                 
    </ul>
</div>

the original jq code is:

$(".news_title").on("click","li",function(){
    $(".news_title li").removeClass("news_active");
    $(this).addClass("news_active");
    var type=$(this).attr("type1");
});

could you tell me how to migrate this jq to vue to do click events? That is, click li to add the class name, brother remove the class name.
look at the online methods are to do for cycle, I would like to ask that there is no for loop to achieve it? The premise is not too complicated, crab

Nuxt.js vue-router vue-cli vuex vue.js

Mar.08,2022

<li v-for="(item, index) in list" :class="{ 'active': activeIndex === index}" @click="activate(index)"></li>

data(){
    return {
        activeIndex: 0
    }
},
methods: {
    activate(index){
        this.activeIndex = index
    }
}

vue has v-class to bind css automatically

<li v-class="{'css class": active}'>

active is the value you need to change, true/false

Previous: Get the values selected by checked under different div

Next: Can you check the history of the online version uploaded by Mini Program?

How does the li click event of vue bind to the class name?
template code is <div class="news_title" v-on:click="news_title" > <ul> <li class="news_active" type1="0">< li> <li type1="1">< li> <li...

Nuxt.js vue-router vue-cli vuex vue.js

Mar.08,2022