Vue实现ul二级菜单的点击展开和收缩

jQuery实现：

之前在刚学习前端时使用的jQuery实现的ul二级菜单的点击展开和收缩，以下是jQuery的代码:

$(".menu>li a").click(function () {
    $(this).next().toggle(300);
})

使用jQuery实现二级菜单的展开和收缩是相当简洁和方便的，只需要获取到一级菜单的元素，然后添加点击事件，在点击事件里就可以实现二级菜单的展开和收缩。注：（300）是展开和收缩的延时，数字越小，延时越低，展开和收缩的反应就越快。反之，则越慢。

Vue实现：

之后在学习了Vue之后想实现ul二级菜单的收放，但是不知道如何下手，因为之前jquery是调用方法进行实现的，之后查阅了网上诸多的资料之后，才使用了一种相当笨的方法来进行实现。

首先上效果图：

点击引导页之后可以展开二级菜单：

再次点击之后就会进行收缩。

 废话不多说，直接上Vue代码：