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

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

编程界明世隐

1873人浏览 · 2020-12-24 11:21:44

编程界明世隐 · 2020-12-24 11:21:44 发布

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

效果图：

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^