5:ref的簡單用法

1:模板中

<li ref="item" class="li qli" v-for="(item,index) in arr" :key="index" @click="add(index,$event)">{{item}}</li>

點擊時間變顏色

	addRemove(index, e) {
		//獲取點擊的元素,也就是wordsArr的索引
		let words = this.wordsArr; //原數組
		let size = this.arr;
		//標識
		let uuid = words[index];
		size.forEach((v, i) => {
			if (uuid == v) {
				//記錄arr數組需要還原的位置索引
				this.$refs.item[i].style.background ="#232E6C"
			}
		});
		//有了需要還原數組的索引,改變原數組的位置的樣式
	
		//刪除點擊的這個元素,也就是wordsArr中的元素,重新獲取wordsArr的長度,再重新計算空格的數量。
		words.splice(index, 1);
		//console.log(words);
	
		let num = words.length;
		this.wordsNum.length = 0; //空格
	
		let choures = 12 - num;
		if (choures == 0) {
			this.wordsNum.length = 0;
		} else {
			for (let i = 0; i < choures; i++) {
				this.wordsNum.push(i);
			}
		}
	},
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章