Блог

работаю с Laravel 5, и у меня есть следующая кнопка переключения начальной загрузки

 <button class="btn btn-primary" id="menu-toggle">Toggle Menu</button>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
 

и мой код jquery

 <script>
$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});
</script>
 

тогда как я мог бы написать вышеуказанные коды jquery в vue js для совместимости с вышеуказанной кнопкой переключения

1. Добавьте вызываемый атрибут данных isMenuVisible , инициализированный значением false.
2. Добавьте прослушиватель кликов к кнопке , которая переключает значение isMenuVisible между true и false: @click="isMenuVisible = !isMenuVisible .
3. Условно примените класс, который скрывает меню при isMenuVisible значении false.
   :class="{ 'hide': !isMenuVisible }"

 <template>
  <div>
    <button @click="isMenuVisible = !isMenuVisible">Toggle Menu</button>
    <div class="menu" :class="{ 'hide': !isMenuVisible }">...</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isMenuVisible: false
    }
  }
}
</script>