vue实现手风琴效果
更新时间:2021年11月25日 15:27:13 作者:温L
这篇文章主要为大家详细介绍了vue实现手风琴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现手风琴效果的具体代码,供大家参考,具体内容如下
利用鼠标移入移出事件实现内容出现隐藏
用到的知识点:
1.@mouseover 鼠标移入事件
2.@mouseout 鼠标移出事件
3.v-if 条件渲染
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 简单样式设置 --> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .title{ width: 90px; height: 40px; line-height: 40px; text-align: center; background-color: #AFAFAF; } .active{ background-color: #000000; color: white; } </style> </head> <body> <div id="box"> <ul class="ul"> <!-- 鼠标移入移出事件 --> <li @mouseover="num=1" @mouseout="num=0" class="title">标题1</li> <!-- 条件渲染 --> <li v-if="num==1">h1h1h1h1</li> <li v-if="num==1">h1h1h1h1</li> <li v-if="num==1">h1h1h1h1</li> <li v-if="num==1">h1h1h1h1</li> </ul> <ul class="ul"> <li @mouseover="num=2" @mouseout="num=0" class="title">标题2</li> <li v-if="num==2">h2h2h2h2</li> <li v-if="num==2">h2h2h2h2</li> <li v-if="num==2">h2h2h2h2</li> <li v-if="num==2">h2h2h2h2</li> </ul> <ul> <li @mouseover="num=3" @mouseout="num=0" class="title">标题3</li> <li v-if="num==3">h3h3h3hh3</li> <li v-if="num==3">h3h3h3hh3</li> <li v-if="num==3">h3h3h3hh3</li> <li v-if="num==3">h3h3h3hh3</li> </ul> </div> </body> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var vm = new Vue({ el: "#box", data() { return { num: 0 } } }) </script> </html>
结果:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果,本文给大家分享在实现过程中遇到问题,需要的朋友一起看看吧2020-02-02vue源码学习之Object.defineProperty 对数组监听
这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-05-05
最新评论