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 的树形选择组件.分享给大家,具体如下: 系统要求:Vue 2 基本特性 完美的多级联动效果 支持无限多的分级 有 全选.半选.不选 三种状态 截图展示 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="https://v1-c
-
vue.js树形组件之删除双击增加分支实例代码
html代码: <script type="text/x-template" id="item-template"> <li> <div :class="{bold: isFolder}" @click="toggle"> {{model.name}} <span v-if="isFolder">[{{open ? '-' : '+'}}]</span&
-
Vue.js 递归组件实现树形菜单(实例分享)
最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m
-
vuejs使用递归组件实现树形目录的方法
上篇文章我提到了通讯录的开发,里面的目录使用了vue的递归组件实现的树形目录,这篇文章就来讲讲如何实现树形目录吧! 首先实现效果如下,觉得菜单还是比较nice的是吧: 这边数据调用的是数据库的数据的,需要数据库进行数据的构造,这里涉及到java的构造多叉树的知识,后续我会另外写一篇文章详细讲解,这里讲下前端. 数据可以先构造json使用,这里用到的格式大概如下,以childList来嵌套子菜单: { id:YH, name:银行, pid:0, childList:[{ id:YH******,
-
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效果: 树形列表,缩进显示层级,第5级数据加底色,数据样式显色,点击展开折叠数据.本文为用Vue实现方式,另有一篇为用knockout.js的实现方法. html代码 <div id="table-component-div"> <table-component v-for="item in data1" v-bind:list="item"></ta
-
Vue组件tree实现树形菜单
vue 编写的树形菜单,小巧实用,支持vue1.0,vue2.0 v1.0 功能: 1.支持多级树目录 2.支持高亮点击的节点 3.支持展开点击节点 4.支持点击收缩节点时收缩所有子目录 5.支持自定义回调函数,点击节点时回调,参数为节点信息 用法:<launch-tree :list='list' :options='options'></launch-tree> list = [ { name: '一级目录', // 目录名字 isOpen: true, // 是否初始展开目录
-
Vue2组件tree实现无限级树形菜单
一直打算偷懒使用个现成的树组件,但是在github上找了一大圈没有找到真正满足应用开发的树组件,所以没办法只能自己写了一个,开源出来希望可以帮助到需要的人,同时如果大家觉得好用,我可以顺带骗骗★(希望喜欢的朋友对我体力的肯定可以点下★ ),由于我也算刚接触vue,所以难免有所考虑不周的地方,希望大家在issue里面指正.组件重点是父子组件数据的共享和状态保持,我是利用了下vuex的思路,采用一个控制仓库完成. github 地址 vue-tree How to run demo npm inst
-
Vue2递归组件实现树形菜单
今天看了老长时间递归组件,官方给的教程太简便了,根本看不出到底怎么用.于是自己查网摸索了一下,这儿只把核心思想写出来. 效果如下图,点击后打开二级菜单,再点击后打开三级. //js //引子 //思想:当v-if='false'时,循环时进行的.所以一开始就设置为false. ggg:{ name:'gs', template:` <div> <p @click.stop='show=!show'>我是p标签</p> //这儿show必须要初始值为false,不然就是堆
-
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.c
-
Vue.js组件tree实现省市多级联动
小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo
-
vue.js element-ui tree树形控件改iview的方法
element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=
-
Vue.js组件通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址: https://github.com/answershuto/learnVue . 在学习过程中,为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issu
-
json+jQuery实现的无限级树形菜单效果代码
本文实例讲述了json+jQuery实现的无限级树形菜单效果代码.分享给大家供大家参考.具体如下: 这里演示json树形菜单,JS无级树树形菜单,引入了jQuery插件,使用递归实现获取无级树数据并生成DOM结构,可以在JSON数据里 扩展无限级 看结构就明白. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-json-tree-style-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
基于jquery实现无限级树形菜单
本文实例为大家分享了基于jquery实现无限级树形菜单效果,具有一定的参考价值,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无限级树形菜单</title> </head> <script src="jque
-
vue.js使用Element-ui中实现导航菜单
本文实例为大家分享了vue.js使用Element-ui中实现导航菜单的具体代码,供大家参考,具体内容如下 写这个的原因是因为当时写这个功能时候element只有效果,但是功能没有实现,当时一头雾水 先放图吧 大体实现思路我先讲一下不然下面代码片段会看懵, 圈出来的左右两部分,左边是element复制就可实现, 右边是跳转的子组件. 首先创建导航菜单的vue文件,但这个文件里面只是引入组件,里面使用Container布局容器实现左右两部分,左边el-aside标签中放入导航菜单的组件,右边el-
-
JS+CSS实现TreeMenu二级树形菜单完整实例
本文实例讲述了JS+CSS实现TreeMenu二级树形菜单.分享给大家供大家参考.具体如下: 这是一款二级树形菜单示例:CSS TreeMenu ,非常漂亮的树形菜单,用在网站右侧比较合适. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-treemenu-2l-menu-codes/ 具体代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" &
-
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
随机推荐
- 攻击方式学习之SQL注入(SQL Injection)第1/3页
- js解析与序列化json数据(三)json的解析探讨
- iOS应用开发中实现页面跳转的简单方法笔记
- JavaScript/jQuery 表单美化插件小结
- 详解ubuntu 16.04安装docker教程
- js跑马灯代码(自写)
- array_multisort实现PHP多维数组排序示例讲解
- C语言实现单链表逆序与逆序输出实例
- Android省电的秘密之JobScheduler
- SQL Server 性能调优之查询从20秒至2秒的处理方法
- JavaScript 事件对内存和性能的影响
- javascript的parseFloat()方法精度问题探讨
- 根据经纬度计算地球上两点之间的距离js实现代码
- php ss7.5的数据调用 (笔记)
- vue-cli项目优化方法- 缩短首屏加载时间
- Unity实现物体左右移动效果
- 易语言使用颜色选择器修改窗口背景颜色
- python字符串的拼接方法总结
- PHP将英文数字转换为阿拉伯数字实例讲解
- 易语言防止杀毒软件误报的方法