Javascript Vue JS在按钮上切换html div类单击不工作

我目前正在为一个我正忙于的项目学习Vue.js。 我一直在通过在线资源以及Maximilian Schwarzmüller的Udemy课程学习，我强烈推荐这门课程

我有一个问题，建立一个汉堡菜单的实践目的。 我在保存菜单内容的div上添加/删除一个类。通过单击按钮（我的“汉堡包”）添加/删除类

就我通过我的课程和其他在线资源（包括一些问题）所知，我所做的应该是可行的

请让我知道，如果你能看到任何问题，因为它不是在我的代码笔工作。 提前感谢=）

相关HTML：

<button v-on:click="isActive = !isActive" class="navigation-hamburger">
  <p>-<br>-<br>-</p>
</button>

<div class="menu-contain" v-bind:class="{ active: isActive}">
 <ul>
  <li><a href="#" class="links">Home</a></li>
  <li><a href="#" class="links">About</a></li>
  <li><a href="#" class="links">Contact</a></li>
 </ul>
</div>

Vue js：

new Vue({
  el: '#wrap',
  data: {
    isActive: false
  }
});

这是代码笔：

---

检查您的标记，有两个结束标记出现故障

<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation">
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="isActive = !isActive" class="navigation-hamburger">
        <p>-<br>-<br>-</p>
      </button>
    </nav>
  </header>

  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div class="menu-contain" v-bind:class="{ active: isActive}">
    <ul>
      <li><a href="#" class="links">Home</a></li>
      <li><a href="#" class="links">About</a></li>
      <li><a href="#" class="links">Contact</a></li>
    </ul>
  </div>
</div>

-
-
-

您有一个错误的关闭

标记，该标记过早地关闭了

#wrap

div，这意味着您的

。menu contain

div超出了Vue实例的范围。这是一个有效的密码笔：是的，就是这样，非常感谢=）啊，这是有效的，代表我犯了一个愚蠢的错误-（非常感谢！）

<div id="wrap">
  <header id="navigation-top">
    <nav class="main-navigation">
      <!-- this is the button that toggles the class "active" -->
      <button v-on:click="isActive = !isActive" class="navigation-hamburger">
        <p>-<br>-<br>-</p>
      </button>
    </nav>
  </header>

  <!-- this is the div that needs to get the class "active" when the button is clicked -->
  <div class="menu-contain" v-bind:class="{ active: isActive}">
    <ul>
      <li><a href="#" class="links">Home</a></li>
      <li><a href="#" class="links">About</a></li>
      <li><a href="#" class="links">Contact</a></li>
    </ul>
  </div>
</div>