<!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实现2级3级导航(简单易懂)
猜你喜欢
转载自blog.csdn.net/dkm123456/article/details/111614880
今日推荐
周排行