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 Accessor实现说明
Dec 06 Javascript
JS解决ie6下png透明的方法实例
Aug 02 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
Vue监听事件实现计数点击依次增加的方法
Sep 26 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
Vue向后台传数组数据,springboot接收vue传的数组数据实例
Nov 12 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
学习php中的正则表达式
2014/08/17 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
PHP实现的MD5结合RSA签名算法实例
2017/10/07 PHP
JavaScript 实现??打印?理
2007/04/28 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
JavaScript仿静态分页实现方法
2015/08/04 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
jQuery中$.each()函数的用法引申实例
2016/05/12 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[06:07]DOTA2-DPC中国联赛3月5日Recap集锦
2021/03/11 DOTA
详解Python字符串对象的实现
2015/12/24 Python
python自动裁剪图像代码分享
2017/11/25 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
python使用代理ip访问网站的实例
2018/05/07 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python实现flappy bird小游戏
2018/12/24 Python
python实现邮件循环自动发件功能
2020/09/11 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
详解h5页面在不同ios设备上的问题总结
2019/03/01 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
毕业自我鉴定
2013/11/05 职场文书
银行职员思想汇报
2013/12/31 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
社会发展项目建议书
2014/08/25 职场文书
体育运动会广播稿
2014/10/05 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Redis全局ID生成器的实现
2022/06/05 Redis