javascript - v-for产生的列表。用v-bind绑定属性，如何实现active的切换

问题描述

问 题

如题，我想实现点击某个li时，添加active效果，别的为默认样式；当点击另一个是，原来的active回去默认样式。用vue该如何实现？

我的代码如下，但是会全部一起被加上或移除active

    <ul class="controller-checkboxs clearfix" >
            <li v-on:click="clicked=!clicked" class="controller-checkbox-item" v-bind:class="clicked?'active':''" v-for="ctrlValue in desc.args">
                    <a>{{ctrlValue}}</a>
            </li>
    </ul>

点击后：

解决方案

<ul class="controller-checkboxs clearfix" >
    <li v-on:click="currentIndex = index" class="controller-checkbox-item" v-bind:class="{clicked: index === currentIndex}" v-for="(ctrlValue, index) in desc.args">
                    <a>{{ctrlValue}}</a>
    </li>
</ul>

data(){
    return{
        currentIndex: 0
    }
}

通过遍历序号进行判定即可

这篇关于javascript - v-for产生的列表。用v-bind绑定属性，如何实现active的切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！