Vue实现2级3级导航（简单易懂）

最新推荐文章于 2024-07-03 10:58:31 发布

编程界小明哥

最新推荐文章于 2024-07-03 10:58:31 发布

阅读量1.8k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/dkm123456/article/details/111614880

版权

vue

vue 专栏收录该内容

16 篇文章 13 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="GBK">
        <title></title>
        <style>
        </style>
    </head>
    <body>
    	<div id="app" >
    		<ul id='one'>
    			<li v-for='item in one' :key='item.id'>
    				<a @click='flagChange(item)'>{{item.name}}</a>
    				<ul v-show='item.flag' id='two'>
    					 <li v-for='item1 in item.sub' :key='item1.id'>
    						<a @click='flagChange1(item1)'>{{item1.name}}</a>
    							<ul v-show='item1.flag' id ='three'>
		    					 <li v-for='item2 in item1.sub2' :key='item2.id' >
		    						{{item2.name}}
		    					</li>
		    				</ul> 
    					</li>
    				</ul> 
    			</li>
    		</ul>
		</div> 
    </body>
   <script src="vue.js"></script>
 	<script>
 	var id=0;
	new Vue({
		el:'#app',
		data:{
		  one:[
			{
				name:'服饰类',
				id:++id,
				flag:true,
				sub:[
						{name:'服饰类1',id:id+"1",flag:false,sub2:[{name:'服饰类11',id:id+"11"}]},
						{name:'服饰类2',id:id+"2",flag:false},
						{name:'服饰类3',id:id+"3",flag:false}
					]
			},
			{
				name:'运动类',
				id:++id,
				flag:false,
				sub:[
					{name:'运动类1',id:id+"1",flag:false},
					{name:'运动类2',id:id+"2",flag:false},
					{name:'运动类3',id:id+"3",flag:false}
				]
			},
			{
				name:'休闲类',
				id:++id,
				flag:false,
				sub:[
					{name:'休闲类1',id:id+"1",flag:false,
					sub2:[{name:'休闲类11',id:id+"11"}]
					},
					{name:'休闲类2',id:id+"2",flag:false,
					sub2:[{name:'休闲类21',id:id+"21"}]
					}
				]
			}
		  ]
		},
		methods:{
			flagChange:function(item){
				item.flag=!item.flag
			},
			flagChange1:function(item){
				item.flag=!item.flag
			}
		}
	})
 	</script>	
		
</html>

效果图：

没有做样式所以不太好看！

编程界小明哥

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
Vue实现2级3级导航（简单易懂）

<!DOCTYPE html><html> <head> <meta charset="GBK"> <title></title> <style> </style> </head> <body> <div id="app" > <ul id='one'>.
复制链接

扫一扫