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

Posted 2023-02-22

【中文标题】Vue.js - 在点击事件上添加类

【英文标题】：Vue.js - Add Class on Click Event

【发布时间】：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 将指的是绑定事件处理程序的元素。希望这对您有所帮助。