Vue实现二级菜单的显示与隐藏
<html>
<head>
<title>Vue实现二级菜单的显示与隐藏</title>
<script src="vue.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="nav">
<ul>
<li v-for="item in items">
<h2 @click="showToggle(item)">{{ item.name }}</h2>
<ul v-if="item.isSubshow">
<li v-for="subItem in item.subItems">
<h3>{{ subItem.name }}</h3>
</li>
</ul>
</li>
</ul>
</div>
<script>
new Vue({
el:"#nav",
data:{
items:[
{
name: "Web前端",
isSubshow:false,
subItems:[
{
name:"HTML"
},
{
name:"Css"
},
{
name:"JavaScript"
} ]
},
{
name:"写代码的兔子",
isSubshow:false,
subItems:[
{
name:"Vue组件"
},
{
name:"Vue实现下拉菜单"
},
{
name:"Vue实现简易留言板"
}
]
}
]
},
methods:{
showToggle:function(item){
item.isSubshow = !item.isSubshow;
}
}
}) </script>
</body>
</html>
Vue实现二级菜单的显示与隐藏的更多相关文章
- 在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- C# 控制win7任务栏、开始菜单的显示与隐藏
因为是做显示程序,故需要控制任务栏与开始菜单的显示与隐藏,这样就美观些.不啰嗦.直接上代码: using System; using System.Collections.Generic; using ...
- DataGridView右键菜单自定义显示及隐藏列
WinForm程序中表单的列可自定义显示及隐藏,是一种常见的功能,对于用户体验来说是非常好的.笔者经过一段时间的摸索,终于实现了自己想要的功能及效果,现记录一下过程: 1.新建一个自定义控件,命名为: ...
- javascript实现下拉菜单的显示与隐藏
demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- VUE项目二级菜单刷新时404 nginx
原因:vue项目的路径时虚拟路径,并不存在,所以用nginx去请求请求不到,所以vue项目做了两部调整: 1.所有的请求后端接口地址前端写死 2.nginx里把所有的接口转发后端删掉,并添加以下内容 ...
- JS-鼠标经过显示二级菜单
在css处添加了border样式为了看得更清楚——源代码有一个程序漏洞,存在一个很烦人的大bug. <ul class="nav"> <li class=&quo ...
- -第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...
- Ionic如何实现单选二级菜单切换
Ionic如何实现单选二级菜单切换 最近有个需求,需要做一个用户视图,数据全都从PC端系统实时取,由于这个功能在电脑浏览器展示还可以,即使菜单全部展开,只要美工稍加调整下位置也是放得下的,但是同样的功 ...
随机推荐
- 在cmd上执行关于java的反编译
反编译是指通过对他人软件的目标程序(比如可执行程序)进行“逆向分析.研究”工作,以推导出他人的软件产品所使用的思路.原理.结构.算法.处理过程.运行方法等设计要素,某些特定情况下可能推导出源代码.反编 ...
- Spring Boot教程（二十四）Web应用的统一异常处理
我们在做Web应用的时候,请求处理过程中发生错误是非常常见的情况.Spring Boot提供了一个默认的映射:/error,当处理中抛出异常之后,会转到该请求中处理,并且该请求有一个全局的错误页面用来 ...
- shell基础操作
一.字符串 字符串是shell编程中最常用的数据类型,字符串可以用单引号,也可以用双引号,也可以不用引号. 单引号 name='xiaoxi' 单引号的限制: 单引号里的任何字符都会原样输出,单引号中 ...
- [CSP-S模拟测试]:数对（线段树优化DP）
题目传送门(内部题96) 输入格式 第一行一个整数$n$,接下来$n$行每行三个整数$a_i,b_i,w_i$. 输出格式 一行一个整数表示最大权值和. 样例 样例输入: 54 4 12 3 31 5 ...
- 一、基础篇--1.1Java基础-自定义注解的场景及实现
自定义注解使用场景: 类属性自动赋值,例如对上下文.传入参数等赋值 验证对象属性完整性,例如,对参数的校验 代替配置文件功能,像spring基于注解的配置 可以生成文档,例如java 最早提供的注解. ...
- eigen 中四元数、欧拉角、旋转矩阵、旋转向量
一.旋转向量 1.0 初始化旋转向量:旋转角为alpha,旋转轴为(x,y,z) Eigen::AngleAxisd rotation_vector(alpha,Vector3d(x,y,z)) 1. ...
- cat输出多行内容到文件
输出格式是: cat > f1.sh <<end ...... end ----------------- == cat < f1.sh ## 同一行中的顺序可以改变 .... ...
- 通过 vSphere WS API 获取 vCenter Datastore Provisioned Space 置备空间
目录 文章目录 目录 Provisioned Space & Used Space Provisioned Space 的计算方式 Uncommitted Space 扩展:置备率的计算公式 ...
- IntelliJ IDEA Default Keymap (idea 快捷键)
- 你知道e.g.和i.e.的区别吗？
见 i.e. 是对前面的完全举例,特指 e.g. 则是不完全举例,有可能是...也有可能是...还可能是其他. 注意,i.e. 和 e.g. 第二个点后面都常跟一个逗号.