vue菜单切换
HTML:
<div id="box">
<ul>
<li v-for= "(item,index) in arry">
<h3 v-text="item.txt" @click="show(index,xian)" @mouseover="show(index,xian)" :class="index === flg ? 'red' :''"></h3>
<ol v-show="index === flg ? xian : false" >
<li v-for="(list,idx) in item.cont" v-text="list" class="name" ></li>
</ol>
</li>
</ul>
</div>
JS:
<script>
//渲染
new Vue({
el: "#box",
data:{
flg:-1,
xian:false,
isShow:true,
arry:[
{"txt":"这是第 1 个div标签","cont":["zhang_1","li_1","wang_1"]},
{"txt":"这是第 2 个div标签","cont":["zhang_2","li_2","wang_2"]},
{"txt":"这是第 3 个div标签","cont":["zhang_3","li_3","wang_3"]}
]
},
//所有的事件方法集合
methods: {
show(idx){
//判断是不是点击的自身,如果不是自身,直接显示子元素。其他隐藏
if(idx != this.flg){
this.flg = idx;
this.xian = true;
}else{
//如果是自身,判断它是显示还是隐藏,显示就隐藏,隐藏就显示
if(this.xian == false){
this.xian = true;
this.flg = idx; }else{
this.xian = false;
}
}
}
}
})
</script>
效果:

总结:
一般用于pc端的菜单栏。
思路:
1. 先判断它点击是否是自己
2. 在判断它的子元素 显示 or 隐藏
vue菜单切换的更多相关文章
- vue实现菜单切换
vue实现菜单切换,点击菜单导航切换不同的内容以及为当前点击的选项添加样式,或者组件. method里: css: html代码: <nav> <ul> <li> ...
- Ionic如何实现单选二级菜单切换
Ionic如何实现单选二级菜单切换 最近有个需求,需要做一个用户视图,数据全都从PC端系统实时取,由于这个功能在电脑浏览器展示还可以,即使菜单全部展开,只要美工稍加调整下位置也是放得下的,但是同样的功 ...
- 第一百四十八节,封装库--JavaScript,菜单切换
第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...
- EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
- Vue 路由切换时页面内容刷新页面并更新数据
第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...
- vue、element-ui 后台菜单切换重新请求数据
我们在做后台管理系统时,通常将数据请求挂载到created或mounted钩子中,但这样引发的问题是它只会被出发一次,如果不同菜单中数据关联性较大,切换过程中未及时更新数据,容易引发一些问题,这种情况 ...
- Vue.js实现后台菜单切换
因为刚初学Vue.js,暂时遇到以下问题,待之后解决 点击父节点,怎么隐藏显示子节点 点击父节点或子节点,切换li的class="active" iframe怎么自适应高度 思路 ...
- vue页面切换效果(slide效果切换)
最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面.反复琢磨的vue里面的transition,最终将实现的核心代码贴出来.这里实现的是上 ...
- Activity内切换fragment实现底部菜单切换遇到的坑
1.一般说来,app底部导航都会设计为5个菜单,可以使用textView,也可使用radioButton,这里我选择用radioButton,给radioButton直接设置selector就可以实现 ...
随机推荐
- Golang通过结构体解析和封装XML
Golang解析和封装XML 解析XML成结构体Demo package main import ( "encoding/xml" "fmt" ) //我们通过 ...
- MySQL密码复杂度策略
前言 MySQL5.6.6版本之后增加了密码强度验证插件validate_password,相关参数设置的较为严格.使用了该插件会检查设置的密码是否符合当前设置的强度规则,若不满足则拒绝设置. 本文采 ...
- Processing中PImage类和loadImage()、createImage()函数的相关解析
聊一聊Processing中PImage类和loadImage().createImage()函数.因为要借P5做多媒体创意展示,图片是一个很重要的媒体.有必要就图片的获取和展放作总结. 首先 有一点 ...
- jquery循环动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&g ...
- Weblogic下的servlet内存马注入-无参照纯调试
目录 1.寻找servlet注入方法 1.1 调试 1.2 servletMapping添加servlet 2.获取request 2.1 从当前线程寻找信息 2.2 JNDI注入到内存马注入 3.关 ...
- Redis 底层数据结构之跳跃表
文章参考 <Redis 设计与实现>黄建宏 Redis(2) 跳跃表 跳跃表 跳跃表 skiplist 是一种有序数据结构,它通过在每个节点中维持多个指向其他节点的指针,从而达到快速访问节 ...
- 一款好用的CRM系统为何很难被企业找到?
如果您想要照明,买个灯具就能解决问题:如果您想要沟通,买个手机就能立刻打起电话:如果您要购买好用的CRM系统,那就没有这么简单了,无论是选型过程还是使用结果都十分复杂.做为想要使用CRM的潜在用户,您 ...
- 什么样的CRM系统适合以客户为中心的企业?
我们不难发现,现代的企业非常依赖CRM系统,这是因为20%的优质客户能够给企业带来80%的利润,而老客户的推荐可以带来60%的客户增长.那么,什么样的CRM系统适合企业?随着信息技术的发展,客户开始拥 ...
- SonarQube 概述与安装
SonarQube 概述 是一种自动代码审查工具,用于检测代码中的错误.漏洞和代码异味.它可以与您现有的工作流程集成,以支持跨项目分支和拉取请求的持续代码检查. 在一个典型的开发过程中 开发人员在 I ...
- Java:Java单例中的懒汉和饿汉模式
1.懒汉模式 懒汉模式:在类加载的时候不被初始化,懒汉式是延时加载,他是在需要的时候才创建对象. public class JdbcUtil { //定义私有的引用 private static Jd ...