vue.js实现三级菜单效果


Posted in Javascript onOctober 19, 2019

本文实例为大家分享了vue.js实现三级菜单的具体代码,供大家参考,具体内容如下

html部分

<div id="warp">
 <ul id="menu">
 <li class="firstLevel" v-for="(firstList,index) in menuData">{{firstList.title}} 
  <ul v-if="firstList.value">
  <li class="secondLevel" v-for="(secondList,index) in firstList.value">{{secondList.title}}
   <ul class="thirdLevel">
   <li v-for="(thirdList,index) in secondList.value2">{{thirdList}}</li>
   </ul>
  </li>  
  </ul>
 </li>
 </ul>
</div>

js部分

var app = new Vue({
 el:"#warp",
 data:{
 menuData: {
     firstList:{
     title:'练习册1', 
     value: [
      {
      title:"物理",
      value2:[
       "暑期",
       "寒假",
       "周末"
      ]
      },
      {
      title:"化学",
      value2:[
      "暑期",
      "寒假",
      "周末"
      ]
      },
     ],
   },
   secondList:{
    title:'练习册2', 
     value: [
      {
      title:"政治",
      value2:[
       "暑期",
       "寒假",
       "周末"
      ]
    },
      {
      title:"地理",
      value2:[
      "暑期",
      "寒假",
      "周末"
      ]
      },
     ],
   },
   thirdList:{
    title:'练习册3', 
     value: [
      {
      title:"语文",
      value2:[
       "暑期",
       "寒假",
       "周末"
      ]
    },
      {
      title:"数学",
      value2:[
       "暑期",
       "寒假",
       "周末"
      ]
      },
      {
      title:"英语",
      value2:[
       "暑期",
       "寒假",
       "周末"
      ]
      },
     ],
   }
 },     
 },
});

css部分

body{
 max-width: 640px;
 margin: 0px auto;
 font-size: 14px;
 color: #666666;
 background-color: #ffffff;
}
ul{
 padding: 0px;
}
li{
 list-style: none;
}
#menu{
 display: flex;
 justify-content: space-between;
}
.firstLevel{
 position: relative;
 min-width: 100px;
 cursor: pointer;
}
.secondLevel{
 display: none;
 margin-left: 10px;
}
.firstLevel:hover .secondLevel{
 display: block;
}
.thirdLevel{
 display: none;
 margin-left: 15px;
 width: 40px;
}
.secondLevel:hover .thirdLevel{
 display: block;
}

更多教程点击《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML5附件拖拽上传drop &amp; google.gears实现代码
Apr 28 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
微信小程序 教程之事件
Oct 18 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
vue.js实现只能输入数字的输入框
Oct 19 #Javascript
Vue数字输入框组件的使用方法
Oct 19 #Javascript
微信小程序实现禁止分享代码实例
Oct 19 #Javascript
Vue.js组件props数据验证实现详解
Oct 19 #Javascript
Vue.js组件使用props传递数据的方法
Oct 19 #Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 #Javascript
JavaScript闭包相关知识解析
Oct 19 #Javascript
You might like
在任意字符集下正常显示网页的方法二(续)
2007/04/01 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php获取excel文件数据
2017/04/21 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
2016/01/19 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
javascript html5实现表单验证
2016/03/01 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python性能提升之延迟初始化
2016/12/04 Python
python如何实现单链表的反转
2020/02/10 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
小学生美德少年事迹材料
2014/08/24 职场文书
2014年科普工作总结
2014/12/06 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
介绍信怎么写
2015/05/05 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
python开发实时可视化仪表盘的示例
2021/05/07 Python
Python 用户输入和while循环的操作
2021/05/23 Python