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 相关文章推荐
Js中使用hasOwnProperty方法检索ajax响应对象的例子
Dec 08 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vuex操作state对象的实例代码
Apr 25 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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
linux下 C语言对 php 扩展
2008/12/14 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
PHP中session变量的销毁
2014/02/27 PHP
php实现水仙花数示例分享
2014/04/03 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
网页javascript精华代码集
2007/01/24 Javascript
javascript 一些用法小结
2009/09/11 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
2017/12/13 Javascript
简化vuex的状态管理方案的方法
2018/06/02 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
2018/07/24 jQuery
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
[02:23]1个至宝=115个英雄特效 最“绿”至宝拉比克“魔导师密钥”登场
2018/12/29 DOTA
python getopt 参数处理小示例
2009/06/09 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
工会积极分子个人总结
2015/03/03 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
你会写请假条吗?
2019/06/26 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js