Vue中点击谁让谁高亮，其他元素保持原来样式不变

每次写Vue的这个东西都会让我想起之前原生js的写法：

el.onclick = function () {
    for (let i = 0, len = items.length; i < len; i++) {
          items[i].className = '';
    }
    this.className = 'active';
}

到了写Vue时，感觉这样写总会引起一些其他不必要的麻烦，所以后来自己思考了一下，就有了下边这种Vue式写法：

<div class="btn-group">
    <button
        :class="{ active: thisName == i }"
        v-for="(item, i) in propSwiperData"
        :key="i"
        :name="i"
        v-text="item.title"
        @click="btnClick"
    ></button>
</div>

data() {
    return {
        thisName: '',
    }
},
methods: {
    btnClick(e) {
        this.thisName = e.target.name
    },
},

分析：
class的样式绑定中需要传入1个对象，对象的属性名是类名，属性值则需要true或者false，当为true时，类名则显示在元素中，并且与之对应的样式也会渲染出来。

那么就true这个值作为考量标准进行操作。

我这里在元素中绑定了name属性，当然也可以绑定其他你后边可以获取到的属性，我将name属性的值绑定为循环中的索引了，保证其唯一性。

然后每个button点击时会默认传入1个事件对象。

那么此时我在事件回调函数btnClick中就可以利用e.target.name获取到我在元素中绑定的name属性对应的值。

这个时候我只需要将name的值赋值给数据中thisName即可，同时在元素中写入thisName == i，此时我点一个按钮，那么thisName是必定与i相等的，就会触发高亮。

此时如果你在btnClick中给thisName赋值前打印thisName你就会发现，每次点击并且未赋值时，thisName都为上次的结果，这样就可以实现点谁谁高亮（两个数据对比时，i是唯一的，所以只会有1个i与thisName对比返回ture）