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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
从盛大通行证上摘下来的身份证验证js代码
Jan 11 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
Vue.js实现微信过渡动画左右切换效果
Jun 13 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
jQuery插件Validation表单验证详解
May 26 jQuery
node静态服务器实现静态读取文件或文件夹
Dec 03 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
深入PHP中的HashTable结构详解
2013/06/13 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
2018/03/30 PHP
laravel实现简单用户权限的示例代码
2019/05/28 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
简单方法判断JavaScript对象为null或者属性为空
2014/09/26 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
vue进入页面时滚动条始终在底部代码实例
2019/03/26 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
Python2.7基于笛卡尔积算法实现N个数组的排列组合运算示例
2017/11/23 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
Python 实现子类获取父类的类成员方法
2019/01/11 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
优秀教师工作感言
2014/02/16 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers