vue.js 左侧二级菜单显示与隐藏切换的实例代码

废话不多说了，直接给大家贴代码了，

完整代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>vue点击切换显示隐藏</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.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="example">
    <ul>
      <li v-for="item in items">
        <h2 @click="showToggle(item)">{{item.name}}</h2>
        <ul v-show="item.isSubShow">
          <li v-for="subItem in item.subItems">
            <h3>{{subItem.name}}</h3>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <script type="text/javascript">
  new Vue({
    el:"#example",
    data:{
      items:[
        {
          name:'家用电器',
          isSubShow:false,
          subItems:[
            {
              name:'笔记本电脑'
            },
            {
              name:'台式电脑'
            },
            {
              name:'电视机'
            }
          ]
        },
        {
          name:'服装',
          isSubShow:false,
          subItems:[
            {
              name:'男士服装'
            },
            {
              name:'女士服装'
            },
            {
              name:'青年服装'
            }
          ]
        }
      ]
    },
    methods:{
      showToggle:function(item){
        item.isSubShow = !item.isSubShow
      }
    }
  })
  </script>
</body>
</html> 

以上所述是小编给大家介绍的vue.js 左侧二级菜单显示与隐藏切换的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！