Vue3点击按钮时如何切换类？实现jQuery toggleClass效果

<template>
  <button
    class="menu_btn"
    :class="{ on: isMenuOpen }"
    @click="toggleMenu">
    <span class="line"></span>
  </button>
  
  <nav
    class="mo_gnb"
    :class="{ on: isMenuOpen }">
    <ul v-if="username" class="tnb cursor">
      <li class="user_name">  
        <p><span>{{ username }}</span></p>
      </li>
      <li @click="remove()">로그아웃</li>
    </ul>
    <ul>
      <li>
        <router-link to="/Home_en" class="on">Dantaro Service</router-link>
      </li>
      <li>
        <router-link to="/Guide_en">User Guide</router-link>
      </li>
      <li>
        <router-link to="/Intro_en">Introduce</router-link>
      </li>
      <li>
        <router-link to="/service_center/notice">Service Center</router-link>
      </li>
      <div class="lang_wrap">
        <li class="lang_btn">
          <router-link to="/Home">KOR</router-link>
        </li>
        <li class="lang_btn">
          <router-link to="/Home_en" class="on">ENG</router-link>
        </li>
      </div>
    </ul>
  </nav>

  <div
    class="sidebar-overlay"
    :class="{ on: isMenuOpen }"></div>
</template>

<script setup>
import { ref } from 'vue'

const isMenuOpen = ref(false)
const username = ref('') // 这里替换为你的用户名逻辑

function toggleMenu() {
  isMenuOpen.value = !isMenuOpen.value
  // 处理body的类切换，因为body不在Vue模板内，用原生API操作
  document.body.classList.toggle('on', isMenuOpen.value)
}

function remove() {
  // 这里添加你的登出逻辑
}
</script>

关键修改说明 #

• 统一状态变量：用isMenuOpen作为唯一开关状态，避免原代码中变量名混乱的问题
• 修正类绑定语法：所有需要切换on类的元素，都采用:class="{ on: isMenuOpen }"的写法——基础类保留在class属性中，绑定对象只控制on类的添加/移除，无需重复写基础类
• 修复函数名冲突：将点击事件函数改为toggleMenu，避免和状态变量重名导致的逻辑错误
• 移除不必要的v-if：原代码用v-if控制导航显示，这和jQuery的toggleClass逻辑不符，改为通过类切换控制样式变化
• 处理body的类：利用原生DOM API直接操作body的类列表，第二个参数确保类的状态和开关完全同步

以上代码完全复刻了你原jQuery代码的功能：点击按钮后，menu_btn、mo_gnb、body、sidebar-overlay四个元素的on类会同步切换。

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