Vue實現二級菜單的顯示與隱藏

本文轉載自查看原文 2018-04-09 17:50 6764 Vue2.0

 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>

顯示效果

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery_顯示和隱藏（二級菜單） javascript 特效實現(3)—— 鼠標滑過顯示二級菜單效果聯動二級菜單實現 jquery實現二級菜單 vue-element-template實戰（六）實現頂部一級菜單，左側二級及二級以下菜單 iOS--UITableView 顯示二級菜單 [原創]Jquery實現二級菜單 JavaScript(jquery)實現二級菜單聯動原生js實現二級伸縮菜單 vue中一級二級菜單的展開與折疊