Vue JS 3 绑定 class 不更新 class

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 字段可访问该 ref :

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>

Vue JS 3 绑定 class 不更新 class

Vue JS 3 binding class does not update the class

javascript

css

vue.js

vuejs3

vue-composition-api