1. 程式人生 > >vue2.x v-for下點選新增class 樣式重新整理不消失 實現類似多選的功能

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