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

PS：我對reactJs有很好的經驗，並且假設如果使用vueJs生成html這個任務可以很容易解決，但我很感興趣 - 我們可以像使用jquery一樣使用VueJs。

Answer 1

您可以使用VueJS的Class和Style Binding在單擊時切換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>