问题 : 为实现横向导航栏点击仅为当前点击对象添加样式,当点击其他对象时,为其他对象添加样式的同时,之前的点击对象恢复原来的样式。
<ul>
<li
v-for="(item,index) in list"
:key = "item.id"
:class = "active == index : 'activeClass' ? '' "
@click="changeClass(index)"
>
</li>
</ul>
<script>
export default{
data(){
return{
active: -1,
}
},
methods:{
changeClass(index){
this.active = index;
}
}
}
</script>
<style>
.activeClass{
background-color: red;
}
</style>