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

柔情只为你懂 2021-07-25 02:21 470阅读 0赞

<!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>

### 效果图： ###

![20201224112212759.png][]

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

[20201224112212759.png]: /images/20210724/848328b8c00e4b338cc73fe02769f7d1.png