原理:利用一个空数组,用来存储点击项的下标,通过控制数组来达到效果。
主要运用到的是几个数组的方法。
-
arrActive.findIndex() 找到的是数组里第一个的位置,找不到返回 -1。
-
arrActive.includes() 判断是否包含某一元素,它直接返回 true 或者 false 表示是否包含元素。
-
arrActive.splice(hash, 1) 从数组中第 hash 项删除 1 项,然后返回删除后的数组。
-
arrActive.push(index) 如果点击的那一项,在数组 arrActive 中不存在,就把下标给添加到数组中。
<div id="app">
<div class="list" :class=" arrActive.includes(index) ? 'active' : '' " v-for="(item, index) in list" :key="index" @click="listClick(index)">
{{item}}
</div>
</div>
const app = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5],
arrActive: []
},
methods: {
listClick(index) {
let hash = this.arrActive.findIndex(item => {
return item == index
})
if (hash > -1) {
this.arrActive.splice(hash, 1)
} else {
this.arrActive.push(index)
}
}
}
})