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