vue 实现二级菜单 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实现二级菜单Vue</title>
    <script src="vue.min.js"></script>
    <style>
        
    </style>
</head>
<body>
  <div id="my">
      <ul>
          <li v-for="item in lists">
              <a @click="show(item)">{{item.name}}</a>
              <ul v-show="item.isShow">
                  <li v-for="sub in item.sub">
                      {{sub.name}}
                  </li>
              </ul>
          </li>
      </ul>
  </div>

  <script>
      window.onload=function(){
          new Vue({
             el:'#my',
              data:{
                  lists:[
                      {
                          name:'流行',
                          isShow:false,
                          sub:[{name:'就'},{name:'是'}]
                      },
                      {
                          name:'流行1',
                          isShow:true,
                          sub:[{name:'就1'},{name:'是1'}]
                      }
                  ]
              },
              methods:{

                show:function(v){
                    this.lists.forEach(function(item){
                        item.isShow=false;
                    });
                    v.isShow=!v.isShow
                }
              }
          })
      }

  </script>
</body>
</html>
posted @ 2019-01-07 11:39  yaomengli  阅读(5295)  评论(0)  编辑  收藏  举报