vue2.x v-for下点击添加class 样式刷新不消失 实现类似多选的功能

下面代码实现的功能:

v-for遍历下的元素,点击哪一个就给哪一个添加changeCollect下的样式,如果已经添加了样式,再点击就取消样式。

点击下一个时,点击过的样式不会消失,类似于多选

1、template代码

<li :class="{changeCollect:isCollect[index]}" @click="changeCollect(index)"></li>

2、script代码

data(){
    return{
		isCollect:localStorage.collect?JSON.parse(localStorage.collect):[]
    }
},
methods:{
	changeCollect:function(index){

		if(this.isCollect[index]){
			this.$set(this.isCollect,index,false)
		}else{
			this.$set(this.isCollect,index,true)
		}

		localStorage.collect = JSON.stringify(this.isCollect)
	}
}

猜你喜欢

转载自blog.csdn.net/qq_39905409/article/details/85262767