Vue2.x实现学校官网菜单栏

程序元单单

已于 2024-04-03 11:28:53 修改

阅读量895

点赞数 26

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

于 2024-04-03 11:27:35 首次发布

本文链接：https://blog.csdn.net/shanxiwei01/article/details/137337186

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

实现首页菜单
功能需求：当鼠标移动到某个菜单上时，会弹出下拉菜单并显示子菜单，当鼠标移开子菜单列表时，子菜单列表自动隐藏

1.创建caidan.html

在caidan.html中创建Vue实例，实例中首先在data 选项中编写一个要显示的菜单信息，这些菜单按照一级菜单及其子菜单的关系进行编写，这样就可以在页面中使用指令动态地显示菜单。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文苑官网</title>
		<script src="js/vue2.js"></script>
	</head>
	<body>
		<div id="app">
			
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					/* 创建一个caidan数组 
					每一个一级菜单添加了一个属性，zhanshi:false,来控制当前一级下的二级菜单是否展示 */
					caidans:[
							   {
								 name:"首页",url:'#',zhanshi:true 
							   },
							   {
								 name:"学校概况",url:"#",zhanshi:false,zicaidans:[
									 {name:'学校简介',url:'#'},
									 {name:'现任领导',url:'#'},
									 {name:'历史沿革',url:'#'},
									 {name:'校徽校训',url:'#'},
									 {name:'校园风光',url:'#'},
									 {name:'发展规划',url:'#'}
								 ]
							   },{
								 name:"机构设置",url:"#",zhanshi:false,zicaidans:[
									 {name:'党群机构',url:'#'},
									 {name:'行政机构',url:'#'},
									 {name:'教学院部',url:'#'},
									 {name:'教辅机构',url:'#'}
								 ]
							   },
							   {
								 name:"招生就业",url:"#",zhanshi:false,zicaidans:[
									 {name:'招生网',url:'#'},
									 {name:'就业网',url:'#'}
								 ]
							   },
							   {
								 name:"专业建设",url:"#",zhanshi:false,zicaidans:[
									 {name:'特色专业建设',url:'#'},
									 {name:'精品课程建设',url:'#'},
									 {name:'教师团队介绍',url:'#'},
									 {name:'名师介绍',url:'#'}
								 ]
							   },
							   {
								 name:"校园文化",url:"#",zhanshi:false,zicaidans:[
									 {name:'教工之家',url:'#'},
									 {name:'学生会',url:'#'},
									 {name:'学生社团',url:'#'},
									 {name:'志愿者协会',url:'#'}
								 ]
							   },
							   {
								 name:"信息公开",url:"#",zhanshi:false,zicaidans:[
									 {name:'信息公开',url:'#'}
								 ]
							   },
							   {
								name:"数字校园",url:'#',zhanshi:true 
							   }
					]
				}
			})
		</script>
	</body>
</html>

顶级菜单中定义了菜单的名字，菜单点击后跳转的url地址，show属性及其子菜单对象zicandans.
zhanshi属性用于控制子菜单是否展示，初始化时子菜单不显示，当鼠标移动到含有子菜单的一级菜单时，该属性变为true,子菜单被渲染出来；鼠标移开时，该属性再变为false,子菜单被隐藏。

2.双层v-for循环遍历caidans菜单对象

双层v-for循环遍历caidans菜单对象，使用v-show指令切换子菜单显示，使用v-on监控鼠标事件mouseover和mouseout 改变鼠标移动到一级菜单上和移出时zhanshi属性的值，在caidan.html中添加如下代码：

<div id="app">
			<!-- 渲染展示一级菜单：使用li列表 -->
			<li v-for="(caidan,index) in caidans" :key="index" v-on:mouseover="caidan.zhanshi = true" @mouseout="caidan.zhanshi = false">
				<a v-bind:href="caidan.url">{{caidan.name}}</a> 
				<!-- 二级菜单 -->
				<ul v-show="caidan.zhanshi">
					<li v-for="(zcd,index) in caidan.zicaidans" :key="index">
						<a v-bind:href="zcd.url">{{zcd.name}}</a>
					</li>
				</ul>
			</li>
		</div>

3.在页面中添加style样式

<style>
			body{
				width: 1500px;
			}
			a{
				text-decoration: none;
				display: block;
				width: 120px;
				height: 40px;
				color: white;
				line-height: 40px;
				background: darkred;
				border: 1px solid white;
			}
			li{
				list-style-type: none;
			}
			
			#app li a:hover{
				color: white;
				background-color: #ffb100;
			}
			/* 子选择器 */
			#app>li{
				float:left;
				text-align: center;
				/* 一级菜单 ：相对定位 */
				position: relative;
			}
			/* 子绝父相 */
			#app li ul{
				/* 二级菜单：绝对定位 */
				position:absolute;
				left:-40px;
				top:30px;
				font-size: 12px;
			}
		</style>

4.使用浏览器打开代码

在这里插入图片描述

程序元单单

关注

26
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
Vue2.x实现学校官网菜单栏

zhanshi属性用于控制子菜单是否展示，初始化时子菜单不显示，当鼠标移动到含有子菜单的一级菜单时，该属性变为true,子菜单被渲染出来；在caidan.html中创建Vue实例，实例中首先在data 选项中编写一个要显示的菜单信息，这些菜单按照一级菜单及其子菜单的关系进行编写，这样就可以在页面中使用指令动态地显示菜单。顶级菜单中定义了菜单的名字，菜单点击后跳转的url地址，show属性及其子菜单对象zicandans./* 一级菜单：相对定位 *//* 二级菜单：绝对定位 *//* 子选择器 */
复制链接

扫一扫