vue.js实现三级菜单效果

 更新时间:2019年10月19日 13:56:37   作者:chong_po   我要评论
这篇文章主要为大家详细介绍了vue.js实现三级菜单效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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组件学习教程进行学习。

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

相关文章

  • 详解如何理解vue的key属性

    详解如何理解vue的key属性

    这篇文章主要介绍了详解如何理解vue的key属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 如何使用vuex实现兄弟组件通信

    如何使用vuex实现兄弟组件通信

    这篇文章主要给大家介绍了关于如何使用vuex实现兄弟组件通信的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-11-11
  • vue 运用mock数据的示例代码

    vue 运用mock数据的示例代码

    本篇文章主要介绍了vue 运用mock数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Vue.js第四天学习笔记

    Vue.js第四天学习笔记

    这篇文章主要为大家详细介绍了Vue.js第四天的学习笔记,json数组数据以csv格式导出,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • 基于vue、react实现倒计时效果

    基于vue、react实现倒计时效果

    这篇文章主要为大家详细介绍了基于vue、react实现倒计时效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • vue使用echarts图表的详细方法

    vue使用echarts图表的详细方法

    这篇文章主要为大家详细介绍了vue使用echarts图表的详细方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • Vuex的初探与实战小结

    Vuex的初探与实战小结

    这篇文章主要介绍了Vuex的初探与实战小结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 谈谈vue中mixin的一点理解

    谈谈vue中mixin的一点理解

    vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用。下面给大家谈谈我对vue中mixin的一点理解,需要的朋友参考下吧
    2017-12-12
  • Vue.Draggable实现拖拽效果

    Vue.Draggable实现拖拽效果

    这篇文章主要介绍了Vue.Draggable实现拖拽效果,使用简单方便 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 快速入门Vue

    快速入门Vue

    本篇文章主要介绍了如何快速入门Vue的方法,对0基础学习Vue的朋友会很有帮助,跟着小编一起来看下吧
    2016-12-12

最新评论