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 相关文章推荐
分享一个自己写的table表格排序js插件(高效简洁)
Oct 29 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
Jun 11 Javascript
jQuery增加自定义函数的方法
Jul 18 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
Oct 10 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
JS中Array数组学习总结
Jan 18 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
bootstrap fileinput插件实现预览上传照片功能
Jan 23 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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文件上传表单摘自drupal的代码
2011/02/15 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
jquery $.ajax相关用法分享
2012/03/16 Javascript
基于jquery的点击链接插入链接内容的代码
2012/07/31 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
浅析jquery unbind()方法移除元素绑定的事件
2016/05/24 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
微信小程序显示下拉列表功能【附源码下载】
2017/12/12 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
Node.js文本文件BOM头的去除方法
2020/11/22 Javascript
Python 除法小技巧
2008/09/06 Python
Python中的map、reduce和filter浅析
2014/04/26 Python
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python使用pil库实现图片合成实例代码
2018/01/20 Python
Python实现基于POS算法的区块链
2018/08/07 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python 图片处理库exifread详解
2021/02/25 Python
巴西手表购物网站:eclock
2019/03/19 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
党的群众路线教育实践活动先进个人材料
2014/12/24 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
使用CSS连接数据库的方式
2022/02/28 HTML / CSS