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

人气：489 时间：2019-04-07

这篇文章主要为大家详细介绍了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 左侧二级菜单显示与隐藏切换的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对四海网网站的支持！

本文来自：http://www.q1010.com/184/3500-0.html

注：关于vue.js 左侧二级菜单显示与隐藏切换的实例代码的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：分析Vue使用命令行搭建单页面应用

下一篇：分析Vue中过度动画效果应用