Vue 点击 for 循环中的项会改变样式，循环的每一项互不影响

原理：利用一个空数组，用来存储点击项的下标，通过控制数组来达到效果。

主要运用到的是几个数组的方法。

1. arrActive.findIndex() 找到的是数组里第一个的位置，找不到返回 -1。

2. arrActive.includes() 判断是否包含某一元素，它直接返回 true 或者 false 表示是否包含元素。

3. arrActive.splice(hash, 1) 从数组中第 hash 项删除 1 项，然后返回删除后的数组。

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