vue.js 左侧二级菜单显示与隐藏切换的实例代码
时间:2019-03-30
本文章向大家介绍vue.js 左侧二级菜单显示与隐藏切换的实例代码,主要包括vue.js 左侧二级菜单显示与隐藏切换的实例代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
废话不多说了,直接给大家贴代码了,
完整代码:
<!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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Vue视图渲染原理解析,从构建VNode到生成真实节点树
- Vue你不得不知道的异步更新机制和nextTick原理
- 手摸手带你理解Vue的Watch原理
- rollup环境搭建(es6转es5、压缩、本地服务器、热更新)
- Vue - 解决路由过渡动画抖动问题
- TypeScript - 泛型
- TypeScript - 类型声明、枚举、函数、接口
- Vue - 简单实现一个命令式弹窗组件
- Vue - 组件通信之$attrs、$listeners
- 多线程系列(一)多线程基础
- Python自动化运维之iptables和安全概述
- Python自动化运维之shell终极指南
- SQL 中判断条件的先后顺序,会引起索引失效么?
- Maven工程java -jar时提示xxx-SNAPSHOT.jar中没有主清单属性
- Kotlin 1.4 版本正式发布:新功能一覽