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 相关文章推荐
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
基于jquery实现的文字淡入淡出效果
Nov 14 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
浅析Jquery操作select
Dec 13 Javascript
JS实现预加载视频音频/视频获取截图(返回canvas截图)
Oct 09 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
基于Vue 服务端Cookies删除的问题
Sep 21 Javascript
实现一个 Vue 吸顶锚点组件方法
Jul 10 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP判断变量是否为0的方法
2014/02/08 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
js弹出的对话窗口永远保持居中显示
2012/12/15 Javascript
html向js方法传递参数具体实现
2013/08/08 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
2016/03/01 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
PyQt5实现简单数据标注工具
2019/03/18 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
巧克力领导品牌瑞士莲美国官网:Lindt Chocolate美国
2016/08/25 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
保留意见审计报告
2015/06/05 职场文书
《月光曲》教学反思
2016/02/16 职场文书
Python实现归一化算法详情
2022/03/18 Python
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL