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项目中,输入框只允许输入数字,现将自己使用的一种方法记录,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了vue 中filter的多种用法,本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2018-04-04
progressbar组件在一个可以直接运行的npm包，通过Yeoman进行构建，再通过Gulp+Webpack构建工具。这篇文章给大家介绍了Vue进度条progressbar组件2018-04-04
vue是一款具有响应式更新机制的框架，既可以实现单向数据流也可以实现数据的双向绑定。这篇文章主要介绍了vue响应式更新机制及不使用框架实现简单的数据双向绑定问题,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue中如何使用embed标签PDF预览，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要为大家详细介绍了Vue.js手风琴菜单组件开发实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
该文章主要介绍了如何在Vue项目中解决IE浏览器的兼容性问题,包括解决IE不兼容axios的Promise对象、ES6语法以及polyfill的使用方法,通过配置babel-polyfill、es6-promise和转ES5语法,解决了在IE浏览器中常见的兼容性问题,需要的朋友可以参考下2025-01-01
这篇文章主要介绍了Vue3 函数式弹窗的实例小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了vue.js todolist实现代码,需要的朋友可以参考下2017-10-10
最新评论