javascript - vuejs如何实现被点击按钮添加addClass，上一次被点击过的removeClass

问题描述

问 题

代码如下：

<ul class="top_bar">
    <li class="top_cell"
        v-bind:class="cell.selected?'active':''"
        v-for="cell in cells"
        v-on:click="choose($index)">
        {{cell.num}}
    </li>
</ul>

new Vue({
    el:'.top_bar',
    data:{
        cells:[
            {num:'1',selected:true},
            {num:'2',selected:false},
            {num:'3',selected:false},
            {num:'4',selected:false},
            {num:'5',selected:false}
        ]
    },
    methods:{
        choose:function (index) {
            this.cells[index].selected=true;
        }
    }
});

这么写每次点击都会在当前点击的按钮添加active，但是上一次的active无法去掉，怎么解决？

解决方案

如果要实现单选逻辑，只需要保存当前选中项的索引即可，没有必要使用数组和布尔值。
简单写一下代码供你参考：

<ul class="top_bar">
    <li class="top_cell"
        v-for="cell in 5"
        :class="{ 'active': cell === selected }"
        @click="choose(cell)">
        {{cell}}
    </li>
</ul>

new Vue({
    el:'.top_bar',
    data:{
        selected: null
    },
    methods:{
        choose:function (index) {
            this.selected = index
        }
    }
});

这篇关于javascript - vuejs如何实现被点击按钮添加addClass，上一次被点击过的removeClass的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！