Vue JS绑定类不更新类

Question

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

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

点击切换类时调用的JS函数

setup(){

let menuOpen=  false

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

布尔值在点击时更新，但类不...我是不是要重新渲染什么的？

Answer 1

您的属性应定义为一个ref，该属性由脚本中的value字段访问：

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

 setup(){
    
    const menuOpen=  ref(false)

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

}

在模板中不需要使用value字段：

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