Vue JS 3 绑定类不更新类

【问题标题】：Vue JS 3 binding class does not update the classVue JS 3 绑定类不更新类
【发布时间】：2021-06-29 10:42:14
【问题描述】：

我想在两个位置激活移动部分的 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}
}

点击时布尔更新，但类没有...我是否必须重新渲染或其他什么？

【问题讨论】：

标签： javascript css vue.js vuejs3 vue-composition-api

【解决方案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>

【讨论】：