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

发布时间：2020-12-14 05:11:53 所属栏目：大数据来源：网络整理

导读：html head titleVue实现二级菜单的显示与隐藏/title script src="vue.js"/script style type="text/css" * { padding: 0 ; margin: 0 ; font - size: 14px; } ul{ width: 200px; height: auto; } h2{ background: green; border: 1px solid #fff; color: #ff

<html>
  <head>
    <title>Vue实现二级菜单的显示与隐藏</title>
    <script src="vue.js"></script>
    <style type="text/css">
     *{
         padding: 0;
         margin: 0;      
         font-size: 14px;    
      }  
      
     ul{      
         width: 200px;      
         height: auto;   
     } 

     h2{      
         background: green;      
         border: 1px solid #fff;      
         color: #fff;      
         height: 30px;      
         line-height: 30px;      
         text-indent: 24px;    
     }  

      h3{      
         background: #999;      
         height: 24px;      
         line-height: 24px;      
         border: 1px solid #fff;      
         text-indent: 50px;    
     }       
    </style>
  </head>
  <body>
    <div id="nav">
      <ul>
        <li v-for="item in items">
          <h2 @click="showToggle(item)">{{ item.name }}</h2>
          <ul v-if="item.isSubshow">
            <li v-for="subItem in item.subItems">
              <h3>{{ subItem.name }}</h3>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <script>
     new Vue({
       el:"#nav",data:{
         items:[
           { 
              name: "Web前端",isSubshow:false,subItems:[
                {
                  name:"HTML"
                },{
                  name:"Css"
                },{
                  name:"JavaScript"
                }
              
              ]
           },{
              name:"写代码的兔子",subItems:[
                {
                  name:"Vue组件"
                },{
                  name:"Vue实现下拉菜单"
                },{
                  name:"Vue实现简易留言板"
                }
              ]
           }
         ]
       },methods:{
         showToggle:function(item){
           item.isSubshow = !item.isSubshow;
         }
       }
     })
    
    </script>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!