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 相关文章推荐
关于javascript中的parseInt使用技巧
Sep 03 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
js给table赋值的实例代码
Oct 13 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
es6 symbol的实现方法示例
Apr 02 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通过API获取手机号码归属地
2015/05/28 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
js 动态选中下拉框
2009/11/26 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
javascript实现dom元素可拖动
2016/03/21 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
巧用canvas
2017/01/21 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
webpack2.0搭建前端项目的教程详解
2017/04/05 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
详解JavaScript的数据类型以及数据类型的转换
2019/04/20 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[51:29]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python 中迭代器与生成器实例详解
2017/03/29 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
骨干教师培训感言
2014/01/16 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
基层党员对照检查材料
2014/08/25 职场文书
招标授权委托书样本
2014/09/23 职场文书
党的群众路线对照检查材料(个人)
2014/09/24 职场文书
学雷锋感言
2015/08/03 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书