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

枫s的思念
  • 2.4k

代码如下:

<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无法去掉,怎么解决?

回复
阅读 15.3k
2 个回答
✓ 已被采纳

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

<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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏