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


Posted in Javascript onMay 23, 2017

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

完整代码:

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

Javascript 相关文章推荐
利用javascript移动div层-javascript 拖动层
Mar 22 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
js单例模式的两种方案
Oct 22 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 jQuery
JS库之wow.js使用方法
Sep 14 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
AngularJS中的作用域实例分析
May 16 Javascript
vue2.x 对象劫持的原理实现
Apr 19 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
AJAX学习笔记
May 18 Javascript
Bootstrap多级菜单的实现代码
May 23 #Javascript
微信小程序获取用户openId的实现方法
May 23 #Javascript
详解vuex 中的 state 在组件中如何监听
May 23 #Javascript
BootStrap表单控件之文本域textarea
May 23 #Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 #Javascript
vue实现app页面切换动画效果实例
May 23 #Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 #Javascript
You might like
php生成WAP页面
2006/10/09 PHP
实用函数7
2007/11/08 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
Python 异常处理实例详解
2014/03/12 Python
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python3爬虫之自动查询天气并实现语音播报
2019/02/21 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
深入研究HTML5实现图片压缩上传功能
2016/03/25 HTML / CSS
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
优秀中专生推荐信
2013/11/17 职场文书
事业单位请假制度
2014/01/13 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
报考公务员诚信承诺书
2014/08/29 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS