Vue实现二级菜单的显示与隐藏

 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>
显示效果