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

2019-11-22,,,

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

完整代码:

<!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 左侧二级菜单显示与隐藏切换的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

您可能感兴趣的文章:

  • Vue.js组件tree实现无限级树形菜单
  • vue2.0使用v-for循环制作多级嵌套菜单栏
  • vue多级多选菜单组件开发
  • Vue2组件tree实现无限级树形菜单
  • 利用vue-router实现二级菜单内容转换
  • Vue iview-admin框架二级菜单改为三级菜单的方法
  • vue二级菜单导航点击选中事件的方法
  • vue单个组件实现无限层级多选菜单功能
  • vue侧边栏动态生成下级菜单的方法
  • vue.js实现二级菜单效果

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

下载本文的Word格式文档,以方便收藏与打印。