Javascript Vue JS 3绑定类不更新该类

HTML部分，我想在两个位置激活移动部分

    <i @click="mobileClick" :class="[{ 'bi-x': menuOpen }, { 'bi-list': !menuOpen },'mobile-nav-toggle', 'bi']"></i>

---

布尔值会在单击时更新，但类不会。。。是否必须重新渲染或执行其他操作？

您的属性应定义为引用，该引用由脚本中的值字段访问：

import {ref} from 'vue';
export default {

 setup(){
    
    const menuOpen=  ref(false)

     const mobileClick = () =>{
     menuOpen.value = !menuOpen.value
     console.log(menuOpen.value)
    }
    return{mobileClick,  menuOpen}
   }

}

在模板中，无需使用值字段：

---

您的属性应定义为可由脚本中的值字段访问的引用：

import {ref} from 'vue';
export default {

 setup(){
    
    const menuOpen=  ref(false)

     const mobileClick = () =>{
     menuOpen.value = !menuOpen.value
     console.log(menuOpen.value)
    }
    return{mobileClick,  menuOpen}
   }

}

在模板中，无需使用值字段：

<i @click="mobileClick" :class="[{ 'bi-x': menuOpen }, { 'bi-list': !menuOpen },'mobile-nav-toggle', 'bi']"></i>