如何将 jQuery 函数（监视 css 类）转换为 Vue 3 中的可用代码？答案

【问题标题】：How to convert jQuery functions (that watch css classes) to usable code in Vue 3?如何将 jQuery 函数（监视 css 类）转换为 Vue 3 中的可用代码？
【发布时间】：2021-02-18 17:52:28
【问题描述】：

这里是查看导航栏以便在点击时打开和关闭它的 jQuery 代码：

  $('#sidenav-toggle').on('click', function() {
    var $sidenav, $this;
    $this = $(this);
    $sidenav = $('.sidenav-overlay');
    if ($this.hasClass('open')) {
      $this.removeClass('open');
      return $sidenav.removeClass('open');
    } else {
      $this.addClass('open');
      return $sidenav.addClass('open');
    }
  });
  $('.sidenav-overlay').find('button.close').on('click', function() {
    $(this).parent().removeClass('open');
    return $('#sidenav-toggle').removeClass('open');
  });

我不确定如何在 Vue 3 中使用它。我知道我可能应该使用观察者来实现相同的功能，但我不确定如何用正确的语法实际编写代码，尤其是关于 CSS 类。我觉得我错过了一些非常基本的东西，所以如果这是一个愚蠢的问题，我深表歉意，我非常感谢一些帮助。谢谢！

【问题讨论】：

到目前为止你尝试了什么？
我一直在看这个vuejs.org/v2/guide/class-and-style.html。但我不确定在哪里插入它。我认为观察者甚至不是必需的，它可以用两种方法来完成。我现在的问题是如何从方法中更改 css 类？

标签： javascript jquery vue.js

【解决方案1】：

使用类来保存应用程序状态并不是最好的主意。在 Vue 中，我建议使用一个数据属性来保存 sidenav 是否打开的状态。然后，您可以将一个事件绑定到切换侧边栏以切换该属性的元素，如v-bind:click="open = !open"。最后像v-bind:class="{open}"这样绑定sidenav上的类，只要数据属性open为真，就会应用类open。

我创建了一个代码框来展示这一点。 https://codesandbox.io/s/epic-sun-5vtm6

如果您单击 Vue 徽标，您可以看到 sidenav 切换进出。请注意，我在组件的数据属性中定义了 open。 img 标记具有切换该打开数据属性的值的事件绑定。然后，aside 元素具有类绑定，它根据 open 属性的值打开和关闭类。

【讨论】：