Vue JS 在按钮上切换 html div class 单击不起作用

Question

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

我在为练习目的构建汉堡菜单时遇到问题。我是 adding/removing 一个 class 在一个 div 上，其中包含我的菜单内容。 class 的 adding/removing 通过单击按钮发生（我的 "hamburger"）。

据我所知，通过我的课程和其他在线资源，包括一些 Whosebug 问题，我所做的应该有效。

如果您发现任何问题，请告诉我，因为它在我的代码笔中不起作用。提前致谢 =)

相关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>

CSS:

.menu-contain {
  width: 100%;
  height: 0px;
  background-color: #09333C;
  transition: all 0.5s linear;
}

.active {
  width: 100%;
  height: 300px;
  background-color: #8BAFB5;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s linear;
}

Vue js：

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

这是代码笔：

https://codepen.io/-Infamous/pen/KvXNJB

Answer 1

检查您的标记，有几个结束标记有问题。

<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>

Vue JS 在按钮上切换 html div class 单击不起作用

Vue JS toggle html div class on a button click not working

html

javascript

css

dom-manipulation

vue.js