vue如何实现鼠标移过出现下拉二级菜单功能

小编给大家分享一下vue如何实现鼠标移过出现下拉二级菜单功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联于2013年成立，是专业互联网技术服务公司，拥有项目网站设计、网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元江城做网站,已为上家服务,为江城各地企业和个人服务,联系电话:13518219792

1.我曾经听一位快十年前端大佬说过一句话,就是能用css实现的动画，就用css不要用js去实现 因为在渲染上css肯定比js效果更好 

我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似  后来参加工作了 公司一直在用vue 所以很多用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单 

我也曾想着就用jquery去实现吧 代码多一点无所谓了 但最后却不是这样 vue好像和jquery中的有些插件冲突了  只要vue已导入 那些用jquery实现的动画 就不能用 但又不能不用vue 没办法 这些效果只能用vue来实现了

vue官方提供了一种动画效果 是 transition  下面是vue官方的经典例子

vue监听的元素 一旦从dom树 发生类似 删除 重新创建  =》 removeElement  createElement   display:block;  display:none;

对应 vue中的 v-if   和 v-show  就可以算是触发一种动画效果  从用户角度来说都是 上面俩种情况都是从无到有的出现在界面上 

.fade-enter-active, .fade-leave-active {   //定义元素 进入页面时和离开页面时的 效果
     transition: opacity .5s;    // 设置透明度默认是1 1是不透明 0是全透明 全透明相当于消失在页面上 transition css3的过度效果
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;    //设置元素进入 前和离开后都是纯透明状态 
 }

// 设置一个按钮 通过v-show 控制元素的显示隐藏


     
      Toggle
     

       //  这个是必须的  
        hello
  //这里的name 和css样式中的那个 fade也是一致的 让p元素display block和node之间切换