提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

Vue 实现 简单 导航 易懂
2023-09-11 14:21:46 时间 
<!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>

效果图：

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

相关文章