如何在通过循环获得的元素的click事件上绑定类？

如何解决如何在通过循环获得的元素的click事件上绑定类？

我遍历对象数组以在html中显示一些可选的信息框。为此，我在事件单击中绑定了一个类，但是当我通过v-for获取元素时，当我选择一个元素时，它将该类绑定到所有元素。

如何仅区分所选的？

我已经看到了几个有关jquery的示例，但我想知道是否还有其他方法。

我的模板：

2017-12-03T10:15:30

非常感谢您的时间和帮助。

解决方法

我个人使用的方法（如果我正确理解了您的问题）是this关键字。

例如：

index.html

<ul id="myList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

script.js（Vanilla JavaScript）

var myList = document.getElementById("myList");
    myList.addEventListener("click",function () {
    console.log(this);
    console.log(this.innerText);
});

script.js（jQuery）

var myList = $("#myList").on("click",function() {
    console.log(this);
    console.log(this.innerText);
});

在这种情况下，使用this关键字使我们可以获得通过仅将事件侦听器附加到父元素而被单击的li元素的innerText。 innerHtml只是使用此关键字的多种方式之一。您可以通过在事件监听器函数中执行console.log(this)来查看更多信息。

让我知道这是否有帮助！

,

我试图做一个jsfiddle来回答您的问题，但是后来我在vue.js论坛上找到了这个jsfiddle：https://jsfiddle.net/mogtfpze/2/

它提供了三种不同的选项，可通过单击突出显示内容。

li v-for="item in items" 
  :class="{highlight:item.id == selected}" 
  @click="selected = item.id">
  {{item.id}}
</li>

尽管这是一个古老的答案，但我认为它仍应与当前的Vue版本兼容。

如果没有，或者不清楚的地方，请告诉我，我会尽力帮助您！