Vue JS 3 绑定类不更新类

Posted 2023-02-22

【中文标题】Vue JS 3 绑定类不更新类

【英文标题】：Vue JS 3 binding class does not update the class

【发布时间】：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)
   
 returnmobileClick,  menuOpen

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

【参考方案1】：

您的属性应定义为ref，可通过脚本中的value 字段访问：

import ref from 'vue';
export default 

 setup()
    
    const menuOpen=  ref(false)

     const mobileClick = () =>
     menuOpen.value = !menuOpen.value
     console.log(menuOpen.value)
    
    returnmobileClick,  menuOpen
   

在模板中无需使用value 字段：

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