代码如下:
<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无法去掉,怎么解决?
先遍历一遍cells把其他项的selected
都置为false
如果要实现单选逻辑,只需要保存当前选中项的索引即可,没有必要使用数组和布尔值。
简单写一下代码供你参考:
<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
}
}
});