使用 vueJs 而不是 jquery

Question

我想知道，有没有一种方法可以用 VueJs 替换 jquery 只是 show/hide 嵌套导航的代码：

<nav class="nav nav-navbar">
<div class="parent"><a class="nav-link active" href="#">Home</a></div>
<div class="nested hide">
    <a class="nav-link"  href="#">Product 1</a>
    <nav class="submenu hide">
        <a href="#">Sub menu 1</a>
        <a href="#">Sub menu 2</a>
    </nav>

</div>
<div class="nested hide">
    <a class="nav-link"  href="#">Product 2</a>
    <nav class="submenu hide">
        <a href="#">Sub menu 1</a>
        <a href="#">Sub menu 2</a>
    </nav>

</div>
<div><a class="nav-link" href="#">Free</a></div>
</nav>

<script>
   $("nav . parent").click((e)=>{
       $(this).next().toogleClass("hide");
   })
</script>

P.S：我对 reactJs 有很好的经验，假设如果用 vueJs 生成 html 这个任务可以很容易地解决，但我很感兴趣 - 我们可以像我们使用的那样使用 VueJs jquery.

Answer 1

您可以将 Class and Style Binding 与 VueJS 一起使用以在点击时切换 css class。

如果要切换多个 menus/submenus，则可以在数据中传递对象而不是简单的布尔值 hide: true/false。
然后在 showMenu 操作中你可以做任何你需要的事情（简单的切换，根据菜单名称添加一些条件等...）

new Vue({
  el: "#app",
  data: {
    hide: { product: true, submenu: true }
  },
  methods: {
    showMenu(menu) {
      this.hide[menu] = !this.hide[menu]
    }
  }
})

.hide {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <nav class="nav nav-navbar">
    <div class="parent" @click="showMenu('product')"><a class="nav-link active" href="#">Home</a></div>
    <div class="nested" :class="{ 'hide': hide.product }">
      <a class="nav-link" href="#" @click="showMenu('submenu')">Product</a>
      <nav class="submenu" :class="{ 'hide': hide.submenu }">
        <a href="#">Sub menu 1</a>
        <a href="#">Sub menu 2</a>
      </nav>
    </div>
    <div><a class="nav-link" href="#">Free</a></div>
  </nav>
</div>

使用 vueJs 而不是 jquery

Use vueJs instead of jquery

javascript

jquery

vue.js