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实现幻灯片播放图片示例代码
Nov 07 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
jQuery基于扩展实现的倒计时效果
May 14 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
vue webuploader 文件上传组件开发
Sep 23 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
Vuex实现数据增加和删除功能
Nov 11 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通用防注入程序 推荐
2011/02/26 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
php后门URL的防范
2013/11/12 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php准确计算复活节日期的方法
2015/04/18 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
php中请求url的五种方法总结
2017/07/13 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
详解ECMAScript typeof用法
2018/07/25 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
vue使用swiper.js重叠轮播组建样式
2019/11/14 Javascript
python去掉行尾的换行符方法
2017/01/04 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
法国时尚童装网站:Melijoe
2016/08/10 全球购物
Becextech新西兰:数码单反相机和手机在线商店
2018/04/27 全球购物
自我评价是什么
2014/01/04 职场文书
会议欢迎词范文
2015/01/27 职场文书
银行实习推荐信
2015/03/27 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP