无需v-for或重复绑定@click，Vue实现点击添加类方案

问题背景 #

有jQuery使用经验的开发者常这么实现FAQ选项的单选功能：给所有.faq-option绑定点击事件，点击时移除其他元素的.faq-selected类，再给当前点击元素加上这个类：

$(".faq-option").on("click",function(){
    $(".faq-selected").removeClass("faq-selected");
    $(this).addClass("faq-selected");
})

现在要在Vue里实现同样的效果，要求不用给每个.faq-option加@click事件，也不用v-for循环生成元素，对应的DOM结构如下：

<div class="faq-contents">
    <div class="faq-option faq-selected">
        <div class="faq-title">Question 1</div>
        <div class="faq-answer">Answer 1</div>
    </div>
    <div class="faq-option">
        <div class="faq-title">Question 2</div>
        <div class="faq-answer">Answer 2</div>
    </div>
    <div class="faq-option">
        <div class="faq-title">Question 3</div>
        <div class="faq-answer">Answer 3</div>
    </div>
</div>

实现方案 #

在Vue里可以用事件委托，直接在父元素.faq-contents上绑定一次点击事件，通过事件对象判断点击目标，再操作类名：

1. 模板中给父元素绑定点击事件 #

<div class="faq-contents" @click="handleFaqClick">
    <!-- 原有的.faq-option元素 -->
    <div class="faq-option faq-selected">
        <div class="faq-title">Question 1</div>
        <div class="faq-answer">Answer 1</div>
    </div>
    <div class="faq-option">
        <div class="faq-title">Question 2</div>
        <div class="faq-answer">Answer 2</div>
    </div>
    <div class="faq-option">
        <div class="faq-title">Question 3</div>
        <div class="faq-answer">Answer 3</div>
    </div>
</div>

2. 在methods里写事件处理逻辑 #

methods: {
    handleFaqClick(e) {
        // 找到点击目标对应的.faq-option元素（点子元素也能向上找到父级）
        const targetOption = e.target.closest('.faq-option');
        if (!targetOption) return; // 没点在.faq-option上，直接返回

        // 移除所有.faq-option的选中类
        document.querySelectorAll('.faq-option').forEach(el => {
            el.classList.remove('faq-selected');
        });
        // 给当前点击的元素加上选中类
        targetOption.classList.add('faq-selected');
    }
}

补充说明 #

• 这种逻辑和jQuery的事件委托思路完全一致，只绑定一次事件，避免逐个绑定的冗余
• closest('.faq-option')能确保即使点击的是.faq-title或.faq-answer这类子元素，也能定位到对应的父级选项
• 对于这种静态DOM结构（非v-for生成），直接操作DOM类名在Vue里是完全可行的

内容的提问来源于stack exchange，提问作者Leggy