如何将 jquery 代码转换为 Vue js

Question

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

那么我如何在 vue js 中编写上面的 jquery 代码以兼容上面的切换按钮

Answer 1

1. 添加一个名为isMenuVisible的数据属性，初始化为false。
2. 为按钮添加一个点击监听器，在 true 和 false 之间切换isMenuVisible 的值：@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>