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 相关文章推荐
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
详解JS函数stack size计算方法
Jun 18 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
Aug 28 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
vue实现移动端返回顶部
Oct 12 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
微信小程序反编译的实现
Dec 10 Javascript
Javascript 解构赋值详情
Nov 17 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
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP+Ajax检测用户名或邮件注册时是否已经存在实例教程
2014/08/23 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
PHP中overload与override的区别
2017/02/13 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
javascript静态的url如何传递
2007/05/03 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
JavaScript对数组进行随机重排的方法
2015/07/22 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
解决vuex刷新数据消失问题
2020/11/12 Javascript
深入解析Python中的上下文管理器
2016/06/28 Python
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
详解如何在Apache中运行Python WSGI应用
2019/01/02 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python序列类型种类详解
2020/02/26 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
Python中如何引入第三方模块
2020/05/27 Python
科颜氏英国官网:Kiehl’s英国
2019/11/20 全球购物
大学生毕业的自我鉴定
2013/11/13 职场文书
国际商务系学生个人的自我评价
2013/11/26 职场文书
员工薪酬福利制度
2014/01/17 职场文书
爷爷追悼会答谢词
2014/01/24 职场文书
小学课外活动总结
2014/07/09 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书