Vue實現2級3級導航（簡單易懂）
阿新 • • 發佈：2021-01-05
<!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>
效果圖：
