javascript - 使用 vueJs 而不是 jquery

Question

我想知道，有没有一种方法可以在仅显示/隐藏嵌套导航的 jquery 代码之后用 VueJs 替换:

<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，这个任务可以很容易地解决，但我很感兴趣 - 我们可以像使用 jquery 一样使用 VueJs。

Answer 1

您可以使用 Class and Style Binding使用 VueJS 在点击时切换 css 类。

如果您有多个菜单/子菜单要切换，您可以在数据中传递一个对象而不是简单的 bool 值 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>