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

只需访问documentation：

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>

Answer 2

使用this代替使用event.target。来自Vue doc-https://vuejs.org/v2/guide/events.html#Method-Event-Handlers：

greet: function (event) {
  // `this` inside methods points to the Vue instance
  alert('Hello ' + this.name + '!')
  // `event` is the native DOM event
  if (event) {
    alert(event.target.tagName)
  }
}

在您的代码中：

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

和：

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

使用“ this”单击时将类切换为元素

2 个答案: