javascript - Vue JS 在单击按钮时切换 html div 类不起作用

Question

我目前正在为一个我忙的元素学习 Vue.js。我一直在通过在线资源以及 Maximilian Schwarzmüller 开设的 Udemy 类(class)学习，我强烈推荐这门类(class)。

我在为练习目的构建汉堡菜单时遇到问题。我在包含我的菜单内容的 div 上添加/删除一个类。通过单击按钮(我的“汉堡包”)来添加/删除类。

据我所知，通过我的类(class)和其他在线资源，包括一些 StackOverflow 问题，我所做的应该有效。

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

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