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

leave-active-class="animated slideInUp"
>
<p v-if="show">hello</p>
</transition>
</div>

vue实例和上面的一模一样就不写了   下面 我附上 animate.css的地址

https://daneden.github.io/animate.css/

3.其实吧 在工作中 你可能就实现一个小动画 好像没必要引进那么大的animate插件库  我在工作中就用的方法1  除非你的项目要大量用到动画 并且需要不同的表现效果 那还是推荐使用插件库  

下面 我说我的实际工作怎么解决的

我要实现一个鼠标移过出现下拉菜单 

.fade-enter-active, .fade-leave-active {
     transition: opacity .5s;
    }
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
 }

// 这里是鼠标移动过给show 赋值每一个遍历li的下标   离开赋值给-1 

// 童鞋们知道为啥赋值成-1吗 因为之前我赋值给false 发现下标是0的时候跟false是相等的  这个算是疏忽了 

//这样就实现了 鼠标移动过 不同的li会出现当前li下的的下拉菜单   动画 经理也没说非要拿吗高级 所以没有在写出什么复杂的动画说实话 本人实力暂时也不是很强  哈哈     这里的i和show 都是变量 所以可以直接在@mouseover事件中使用  很多童鞋可能忘记了这种用法 只知道  事件后面一定要绑定方法 其实给变量赋值 也是可以的

<li class="nLi" v-for="(v,i) of itemList" @mouseover="show=i" @mouseout="show=-1">
                  <h3><a href="">企业文化</a>|</h3>
                  <transition name="fade">
                    <div class="sub" v-show="show==i">
                        <ul>
                          <li><a href="">公司理念</a></li> 
                          <li><a href="">发展战略</a></li>
                         <li><a href="">发展历程</a></li>
                     </ul>
               </div>
        </transition>
  </li> 
var app1=new Vue({
    el:'#app',//或者'#app'
    data:{
      show:-1   //vue实例 定义一个变量
    }
  })

好了 这个算是今天的一个小收获  到此结束 我会持续更新把碰见的问题 共享出来 让很多童鞋少走弯路  本人一直在向大牛的路上努力前进着

总结

以上所述是小编给大家介绍的vue实现鼠标移过出现下拉二级菜单，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！