Vue实现二级导航

最新推荐文章于 2024-10-09 19:50:52 发布

조국화

最新推荐文章于 2024-10-09 19:50:52 发布

阅读量1.1k

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46374053/article/details/105669001

版权

1、样式与尺寸可根据需求进行改动；
2、数据内容可根据实际需求进行改动；
3、主要是对二级菜单和当前点击的处理：
点击导航时，切换二级菜单显示状态（显示或者关闭），并且字体颜色变色，表示页面处于当前位置，导航中最多只能有一个菜单变色。
4、本文章只是简单的实现了二级导航，仅做参考！

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>二级菜单(vue)</title>
	<!-- 引入当前目录下的vue -->
	<script src="./vue.js"></script>
	<style>
		li{
			list-style: none;
			cursor: pointer;
		}
		ol{
			padding-left: 20px;
		}
		dl{
			padding-left: 30px;
		}
		/*给当前点击项添加颜色*/
		.active{
			color:red;
		}
		#list a{
			text-decoration: none;
		}
	</style>
</head>
<body>
	// 二级导航
	<ul id="list">
		<!-- 点击切换状态 -->
		<li v-on:click.stop="toggle">此电脑
			<ol class="disk" v-show="visible">
				<!-- 遍历，数据渲染，点击时添加颜色，并切换状态 -->
				<li v-for="items in arr" v-bind:key="items.id" v-on:click.stop="toggle2(items)" v-bind:class={"active":items.visible}>{{items.name}}
					<dl v-show="items.visible">
						<!-- 遍历，数据渲染 -->
						<li v-for="(item,id) in items.second" v-bind:key="id"><a href="#">{{item}}</a></li>
					</dl>
				</li>
			</ol>
		</li>
	</ul>
</body>
<script>
	new Vue({
		el:"#list",         // 挂载元素
		data:{
			arr:[{
				id:1,  // 作为唯一标识
				name:"OS(c)",
				visible:false,   // 默认不显示
				second:["my file","user"]
			},
			{
				id:2,  // 作为唯一标识
				visible:false,	// 默认不显示
				name:"本地磁盘(D)",
				second:["music","video"]
			},
			{	
				id:3,  // 作为唯一标识
				visible:false,	//默认不显示
				name:"本地磁盘(E)",
				second:["项目","资料","下载内容"]
			},
			{	
				id:4,  // 作为唯一标识
				visible:false,	//默认不显示
				name:"本地磁盘(F)",
				second:["图片","我的文档","爱奇艺","网易"]
			}],
			visible:false   // 第一层默认不显示
		methods:{
			// 第一层的点击事件处理函数
			toggle(){
				this.visible = !this.visible;
			},
			// 第二层的点击事件处理函数
			toggle2(items){
				items.visible = !items.visible;
			}
		}
	})
</script>
</html>