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 相关文章推荐
批量实现面向对象的实例代码
Jul 01 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
JS中数组Array的用法示例介绍
Feb 20 Javascript
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
php 数组的指针操作实现代码
2011/02/08 PHP
PHP实现股票趋势图和柱形图
2015/02/07 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
基于jquery的放大镜效果
2012/05/30 Javascript
带有定位当前位置的百度地图前端web api实例代码
2016/06/21 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
如何解决IONIC页面底部被遮住无法向上滚动问题
2016/09/06 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
2018/01/11 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
Django继承自带user表并重写的例子
2019/11/18 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Python绘图之二维图与三维图详解
2020/08/04 Python
Django静态文件加载失败解决方案
2020/08/26 Python
python爬取代理ip的示例
2020/12/18 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
使用HTML5拍照示例代码
2013/08/06 HTML / CSS
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
软件测试工程师笔试题带答案
2015/03/27 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
政工师工作总结2015
2015/05/26 职场文书
离婚律师函范本
2015/05/27 职场文书
千与千寻观后感
2015/06/04 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
python中%格式表达式实例用法
2021/06/18 Python
golang中字符串MD5生成方式总结
2021/07/04 Golang