1 <html> 2 <head> 3 <title>Vue实现二级菜单的显示与隐藏</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 *{ 7 padding: 0; 8 margin: 0; 9 font-size: 14px; 10 } 11 12 ul{ 13 width: 200px; 14 height: auto; 15 } 16 17 h2{ 18 background: green; 19 border: 1px solid #fff; 20 color: #fff; 21 height: 30px; 22 line-height: 30px; 23 text-indent: 24px; 24 } 25 26 h3{ 27 background: #999; 28 height: 24px; 29 line-height: 24px; 30 border: 1px solid #fff; 31 text-indent: 50px; 32 } 33 </style> 34 </head> 35 <body> 36 <div id="nav"> 37 <ul> 38 <li v-for="item in items"> 39 <h2 @click="showToggle(item)">{{ item.name }}</h2> 40 <ul v-if="item.isSubshow"> 41 <li v-for="subItem in item.subItems"> 42 <h3>{{ subItem.name }}</h3> 43 </li> 44 </ul> 45 </li> 46 </ul> 47 </div> 48 <script> 49 new Vue({ 50 el:"#nav", 51 data:{ 52 items:[ 53 { 54 name: "Web前端", 55 isSubshow:false, 56 subItems:[ 57 { 58 name:"HTML" 59 }, 60 { 61 name:"Css" 62 }, 63 { 64 name:"JavaScript" 65 } 66 67 ] 68 }, 69 { 70 name:"写代码的兔子", 71 isSubshow:false, 72 subItems:[ 73 { 74 name:"Vue组件" 75 }, 76 { 77 name:"Vue实现下拉菜单" 78 }, 79 { 80 name:"Vue实现简易留言板" 81 } 82 ] 83 } 84 ] 85 }, 86 methods:{ 87 showToggle:function(item){ 88 item.isSubshow = !item.isSubshow; 89 } 90 } 91 }) 92 93 </script> 94 </body> 95 </html>
显示效果
