Vue.js组件tree实现无限级树形菜单

更新时间：2021年08月20日 11:05:22 作者：爱喝酸奶的吃货

这篇文章主要为大家详细介绍了Vue.js组件tree实现无限级树形菜单代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下。
代码看这里喽:

html代码:

<div class="tree">
 <nav class='navbar'>
 <ul class='nav nav-stacked'>
 <template v-for='item in menus'>
 <li role='presentation' v-if='!item.children'><a href="#">{{item.text}}</a></li>
 <li role='presentation' v-if='item.children'><a href="#" v-on:click='toggleChildren(item)'>{{item.text}}<span class='glyphicon' v-bind:class='{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }'></span></a>
 <ul v-show='item.expanded' class="childs">
 <li v-for='child in item.children'><a href="#">{{child.text}}</a></li>
 </ul>
 </li>
 </template>
 </ul>
 </nav>
</div>

js代码:

methods: {
 toggleChildren: function(item) {
 item.expanded = !item.expanded;
 },
 },
 data() {
 return {
 menus:[{
 text:'水果',
 expanded:false,
 children:[{
 text:'苹果',
 },{
 text:'荔枝'
 },{
 text:'葡萄'
 },{
 text:'火龙果'
 }]
 },{
 text:'好吃的',
 expanded:false,
 children:[{
 text:'糖',
 },{
 text:'面包'
 },{
 text:'火腿'
 },{
 text:'薯片'
 },{
 text:'碎碎面'
 }]
 },{
 text:'饮料',
 expanded:false,
 children:[]
 }]
 }
 },

效果图：

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

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

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

您可能感兴趣的文章:

vue可拖拽的瀑布流布局组件实现详解
这篇文章主要为大家介绍了vue的可拖拽的瀑布流布局组件有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
使用Vue组件实现一个简单弹窗效果
这篇文章主要介绍了使用Vue组件实现一个简单弹窗效果,本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式，props 、 $emit 传参，具体组件代码也传上去了。需要的朋友可以参考下
2018-04-04
Vuex之理解Store的用法
本篇文章主要介绍了Vuex之理解Store的用法，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中
2017-04-04
Vue3中reactive变量重新赋值无法响应的3种处理方法
这篇文章主要给大家介绍了关于Vue3中reactive变量重新赋值无法响应的3种处理方法,在Vue3中可以使用reactive函数将一个普通对象转换为响应式对象,需要的朋友可以参考下
2023-08-08
Element Plus的el-icon怎么用
在Element Plus里，Icon图标的用法和以前不一样了，本文主要介绍了Element Plus的el-icon怎么用，具有一定的参考价值，感兴趣的可以了解一下
2022-04-04
封装 axios+promise通用请求函数操作
这篇文章主要介绍了封装 axios+promise通用请求函数操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
Vue3.x使用mitt.js进行组件通信
Vue2.x 使用 EventBus 进行组件通信，而 Vue3.x 推荐使用 mitt.js。本文就介绍一下mitt.js的具体使用方法，感兴趣的可以了解一下
2021-06-06
Vue中原生template标签失效如何解决
这篇文章主要介绍了Vue中原生template标签失效如何解决，找了整一天也没找着这事件为什么触发不了，第二天意识到原生代码里的template可能有问题，在原生环境中template标签内部的东西是不会渲染出来的，虽然解析器在加载页面的时候确实会处理这部分代码片段
2023-02-02
浅析Proxy如何实现Vue响应式
这篇文章主要是来和大家探讨一下，Vue的响应式系统仅仅是一个Proxy吗，本文将围绕此问题探索一下Proxy是如何实现Vue响应式的，感兴趣的小伙伴可以了解一下
2023-08-08
Vue?socket.io模块实现聊天室流程详解
vue-socket.io其实是在socket.io-client（在浏览器和服务器之间实现实时、双向和基于事件的通信）基础上做了一层封装，将socket挂载到vue实例上，同时可使用sockets对象轻松实现组件化的事件监听，在vue项目中使用起来更方便
2022-12-12