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
        }
    }
});

回答:

遍历一遍cells把其他项的selected都置为false

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注