vue手风琴组件,vue手风琴动画
这篇文章主要为大家详细介绍了某视频剪辑软件实现手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现手风琴效果的具体代码，供大家参考，具体内容如下
利用鼠标移入移出事件实现内容出现隐藏
用到的知识点：
1.@鼠标悬停鼠标移入事件
2.@mouseout鼠标移出事件
3.v-if条件渲染
！声明文档类型
超文本标记语言
头
meta charset=utf-8
标题/标题
！-简单样式设置-
style type=text/css
* {
边距：0;
填充：0;
}
ul {
列表样式：无；
}。标题{
宽度：90px
高度：40px
行高：40px
文本对齐：居中；
背景色：# AFAFAF
}。活动{
背景色：# 000000;
颜色：白色；
}
/风格
/头
身体
div id=box
ul class=ul
！-鼠标移入移出事件-
Li @ mouse over= num=1 @ mouse out= num=0 class= title 标题1/李
！-条件渲染-
Li v-if= num==1 h1 h1 h1/Li
Li v-if= num==1 h1 h1 h1/Li
Li v-if= num==1 h1 h1 h1/Li
Li v-if= num==1 h1 h1 h1/Li
/ul
ul class=ul
Li @ mouse over= num=2 @ mouse out= num=0 class= title 标题2/李
李和在一起
李和在一起
李和在一起
李和在一起
/ul
保险商实验所
Li @ mouse over= num=3 @ mouse out= num=0 class= title 标题3/李
李v-if= num==3 H3 H3 hh 3/李
李v-if= num==3 H3 H3 hh 3/李
李v-if= num==3 H3 H3 hh 3/李
李v-if= num==3 H3 H3 hh 3/李
/ul
/div
/body
脚本src=./js/vue。js type= text/JavaScript charset= utf-8 /script
脚本类型=文本/javascript
var vm=new Vue({
el: #box ，
data() {
返回{
数量：0
}
}
})
/脚本
/html
结果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。