vue.js树形组件之删除双击增加分支实例代码


Posted in Javascript onFebruary 28, 2017

html代码:

<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle">
{{model.name}}
<span v-if="isFolder">[{{open ? '-' : '+'}}]</span>
</div>
<!--v-show控制当前元素的display属性,根据v-show里面的值来判断,true显示,false不显示-->
<ul v-show="open" v-if="isFolder">
<!--model用于双向绑定数据-->
<item class="item" v-for="model in model.children" :model="model">
</item>
</ul>
</li>
</script>
<ul id="demo">
<item class="item" :model="treeData">
</item>
</ul>

这里使用x-template全局属性,页面加载不显示,但是可供js使用

js代码:

<script>
//加载树形结构初始数据,可用ajax获取
var data = {
name: 'My Tree',
children: [
{ name: '一级' },
{ name: '一级' },
{
name: '一级有子菜单',
children: [{
name: '二级有子菜单',
children: [
{ name: '三级' },
{ name: '三级' }
]
},
{ name: '二级' },
{ name: '二级' }
]
}
]
}
Vue.component('item', {//获取全局组件(可用于注册组件)
template: '#item-template',
props: {
model: Object//定义model数据格式
},
data: function() {
return {
open: false//vue对样式改变操作,true显示 false不显示
}
},
computed: {//读取写入函数,不写get,set则为只读
isFolder: function() {
return this.model.children
}
},
methods: {
toggle: function() {
if(this.isFolder) {
this.open = !this.open//打开树形结构
}
}
}
})
<li><a href="http://www.wfqcp.com/" rel="external nofollow" >潍坊长途汽车站</a></li>
var demo = new Vue({//创建一个vue实例,绑定树形数据
el: '#demo',
data: {
treeData: data
}
})
</script>

以上所述是小编给大家介绍的vue.js树形组件之删除双击增加分支实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript脚本编程解决考试分数统计问题
Oct 18 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
May 25 Javascript
简单实现js放大镜效果
Jul 24 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
js实现超级玛丽小游戏
Mar 18 Javascript
Vuex的热更替如何实现
Jun 05 Javascript
three.js显示中文字体与tween应用详析
Jan 04 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 #Javascript
jQuery中的on与bind绑定事件区别实例详解
Feb 28 #Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 #Javascript
js 转义字符及URI编码详解
Feb 28 #Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 #Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 #Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
How do I change MySQL timezone?
2008/03/26 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
php7函数,声明,返回值等新特性介绍
2018/05/25 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
Jquery 实现Tab效果 思路是js思路
2010/03/02 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
Vue.js学习笔记之常用模板语法详解
2017/07/25 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
深入理解Python装饰器
2016/07/27 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python 使用 PyQt5 开发的关机小工具分享
2020/07/16 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
商业活动邀请函
2014/02/04 职场文书
建筑工地宣传标语
2014/06/18 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
世界文化遗产导游词
2015/02/13 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏