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


Posted in Javascript onDecember 02, 2016

分享一段用 <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组件tree实现无限级树形菜单

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

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

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

Javascript 相关文章推荐
Javascript base64编码实现代码
Dec 02 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
May 23 Javascript
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
原生js制作日历控件实例分享
Apr 06 Javascript
jquery事件绑定解绑机制源码解析
Sep 19 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
vue动画打包后失效问题的解决方法
Sep 18 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 #Javascript
Vue.js第四天学习笔记
Dec 02 #Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 #Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 #Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 #Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 #Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 #Javascript
You might like
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
vue2.0 常用的 UI 库实例讲解
2017/12/12 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
2020/06/01 Javascript
以windows service方式运行Python程序的方法
2015/06/03 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
详解PyCharm+QTDesigner+PyUIC使用教程
2019/06/13 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
Python实现仿射密码的思路详解
2020/04/23 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
Nike爱尔兰官方网站:Nike.com (IE)
2018/03/12 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
党员组织关系介绍信
2014/02/13 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
欢迎家长标语
2014/10/08 职场文书
产品调价通知函
2015/04/20 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis