关于javascript: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）