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菜单切换的更多相关文章

  1. vue实现菜单切换

    vue实现菜单切换,点击菜单导航切换不同的内容以及为当前点击的选项添加样式,或者组件. method里: css: html代码: <nav> <ul> <li> ...

  2. Ionic如何实现单选二级菜单切换

    Ionic如何实现单选二级菜单切换 最近有个需求,需要做一个用户视图,数据全都从PC端系统实时取,由于这个功能在电脑浏览器展示还可以,即使菜单全部展开,只要美工稍加调整下位置也是放得下的,但是同样的功 ...

  3. 第一百四十八节,封装库--JavaScript,菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  4. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  5. Vue 路由切换时页面内容刷新页面并更新数据

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新 <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM <keep-aliv ...

  6. vue、element-ui 后台菜单切换重新请求数据

    我们在做后台管理系统时,通常将数据请求挂载到created或mounted钩子中,但这样引发的问题是它只会被出发一次,如果不同菜单中数据关联性较大,切换过程中未及时更新数据,容易引发一些问题,这种情况 ...

  7. Vue.js实现后台菜单切换

    因为刚初学Vue.js,暂时遇到以下问题,待之后解决 点击父节点,怎么隐藏显示子节点 点击父节点或子节点,切换li的class="active" iframe怎么自适应高度 思路 ...

  8. vue页面切换效果(slide效果切换)

    最近碰到一个需求,单页应用里面页面切换的效果需要做成跟轮播图滑动slide一样,让这个页面在切换时感觉是一个页面.反复琢磨的vue里面的transition,最终将实现的核心代码贴出来.这里实现的是上 ...

  9. Activity内切换fragment实现底部菜单切换遇到的坑

    1.一般说来,app底部导航都会设计为5个菜单,可以使用textView,也可使用radioButton,这里我选择用radioButton,给radioButton直接设置selector就可以实现 ...

随机推荐

  1. MobileNet系列之MobileNet_v2

    ​ MobileNet系列之MobileNet_v1 Inception系列之Inception_v1 Inception系列之Batch Normalization Inception系列之Ince ...

  2. 分布式AKF拆分原则

    1. 前言 当我们需要分布式系统提供更强的性能时,该怎样扩展系统呢?什么时候该加机器?什么时候该重构代码?扩容时,究竟该选择哈希算法还是最小连接数算法,才能有效提升性能? 在面对 Scalabilit ...

  3. 关于Word中复杂表格转完美的Markdown格式的技巧

    背景 我们都知道有很多工具能做到Word转Markdown格式,但是在某些复杂的需求下,比如带合并单元格的表格,就会出现错乱,效果非常不理想. 那我们今天来学习和探讨下怎么实现完美转换. 转换 如果想 ...

  4. Android Studio用上国产杰出代表夜神模拟器

    背景介绍 在Windows上除了官方的AVD(Android Virtual Device)我们还可以使用更加便捷的国产安卓模拟器,比如杰出的代表就是夜神模拟器. 我们现在是假设你已经安装好了Andr ...

  5. Linux下的SSH,你知道多少?

    Openssh介绍 OpenSSH 是 SSH (Secure Shell) 协议的免费开源实现.SSH协议族可以用来进行远程控制, 或在计算机之间传送文件.而实现此功能的传统方式,如telnet(终 ...

  6. Springboot:SpringBoot2.0整合WebSocket,实现后端数据实时推送!

    一.什么是WebSocket? B/S结构的软件项目中有时客户端需要实时的获得服务器消息,但默认HTTP协议只支持请求响应模式,这样做可以简化Web服务器,减少服务器的负担,加快响应速度,因为服务器不 ...

  7. 16 shell select in 循环

    select in 是 Shell 独有的一种循环,适用于与终端(Terminal)进行交互,在其他编程语言中是没有的. 用法 说明 脚本 select var in val_listdo    st ...

  8. 所有的Java虚拟机必须实现在每个类或接口被Java程序 “ 首次主动使用 ” 时才初始化他们

    原文:https://www.cnblogs.com/fanjie/p/6916784.html Java程序对类的使用方式可分为两种– 主动使用– 被动使用 被动使用以后再讲,这里说说什么是主动使用 ...

  9. Nginx 实践:location 路径匹配

    1. 目标 nginx 反向代理,路径映射的过程是什么?如何配置路径映射规则? 2.location 路径匹配 2.1 匹配规则: location 路径正则匹配: 符号 说明 ~ 正则匹配,区分大小 ...

  10. ios多线程开发基础

    多线程编程:下载数据时,开辟子线程,减少阻塞时间,和主线程并发运行,提升用户体验 1.Thread 1>新建Thread对象,带一selector方法,调用start方法,开启子线程 2> ...