当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue.js 左侧二级菜单显示与隐藏切换的实例代码

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

2018年04月26日  | 移动技术网IT编程  | 我要评论

爱的痕迹国语版普通话,恶人从慕容复开始,江湖行程灵素同人

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

完整代码：

<!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 左侧二级菜单显示与隐藏切换的实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网