Vue.js - 在点击事件上添加类答案

【问题标题】：Vue.js - Add Class on Click EventVue.js - 在点击事件上添加类
【发布时间】：2017-08-21 09:23:44
【问题描述】：

我想在 Vue.js 中的 div 上动态切换 click 事件上的类，而不使用属性/数据。

这是我的 div

<div class="quiz-item" @click="checkAnswer(1)">

当点击这个div 时，我想添加类quiz-item--correct 或quiz-item--incorrect（这个逻辑将在别处处理）。我不能使用属性，因为测验中的答案太多，无法成为一种可维护/可行的方法。

有人对我如何实现此功能有任何想法吗？

【问题讨论】：

【解决方案1】：

你可以这样做：

<div class="quiz-item" @click="$event.target.classList.toggle('classname')">

您可以查看演示此功能的小提琴：Here

【讨论】：

我不认为所有浏览器都支持 classList，特别是 IE
@victor 是的，IE classList 方法。但是如果你想支持这些浏览器，你可以使用变通方法，比如调用一个函数并在那里操作类。
嗯......有点工作......但遗憾的是它不适合我......现在当在这个监听器的 div 中有一个 span 或另一个 div 或其他东西。当我单击元素时，孩子会获得公开课。不是元素本身...
@LarsVandeDonk 如果您在div 中嵌套了可以接收点击的元素，您可能需要将点击处理程序更改为$event.currentTarget.class...。 target 指的是发生事件的元素，在您的情况下可以是任何子元素，currentTarget 将指的是绑定事件处理程序的元素。希望这对您有所帮助。