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操作XML实例代码(获取新闻标题并分页,并分页)
May 25 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
Javascript必知必会(四)js类型转换
Jun 08 Javascript
jquery Banner轮播选项卡
Dec 26 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
微信小程序module.exports模块化操作实例浅析
Dec 20 Javascript
ES6中new Function()语法及应用实例分析
Feb 19 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 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
输出控制类
2006/10/09 PHP
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
百度地图经纬度转换到腾讯地图/Google 对应的经纬度
2015/08/28 PHP
解决yii2左侧菜单子级无法高亮问题的方法
2016/05/08 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
jQuery自定义数值抽奖活动代码
2016/06/11 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
2018/12/09 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
浅析Python中的join()方法的使用
2015/05/19 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
在python 中实现运行多条shell命令
2019/01/07 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
Python numpy数组转置与轴变换
2019/11/15 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
考博自荐信
2013/10/25 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
招标保密承诺书
2015/01/20 职场文书
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android