javascript - 使用 'this' 单击时将类切换到元素

Question

我有一个没有 ID 的元素，例如。

<div class='classA' v-on:click='addClassB(this)'></div>

当您单击它时，我想要添加一个类，或者删除它(如果已经存在)，它会调用此函数:

methods: {
    addClassB: function () {
        this.classList.toggle("classB");
    }
}

这显然不起作用，我希望能够在该项目上切换“classB”，因为我可以有这样的东西:

<div class='classA' v-on:click='addClassB(this)'></div>
<div class='classA' v-on:click='addClassB(this)'></div>
<div class='classA' v-on:click='addClassB(this)'></div>

因此，当单击一个时，我不希望所有的都添加 classB，而只添加单击的一个。

我也在使用Vue。

Answer 1

只需访问 event target from the method itself :

methods: {
    addClassB: function (event) {
        event.target.classList.toggle("classB");
    }
}

因此不再需要将任何参数传递到处理程序中:

<div class='classA' v-on:click='addClassB'></div>

请参阅下面的概念验证示例:

new Vue({
  el: '#app',
  methods: {
    addClassB(event) {
      event.target.classList.toggle('classB');
    }
  }
});

#app {
  display: flex;
}
#app div {
  width: 50px;
  height: 50px;
  margin: 10px;
}
.classA {
  background: red;
}
.classB {
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="classA" v-on:click="addClassB"></div>
  <div class="classA" v-on:click="addClassB"></div>
  <div class="classA" v-on:click="addClassB"></div>
</div>