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一样使用VueJ。

Answer 1

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

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

1 个答案: