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 相关文章推荐
jquery nth-child()选择器的简单应用
Jul 10 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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+MYSQL的文章管理系统(一)
2006/10/09 PHP
PHP 多进程 解决难题
2009/06/22 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
JavaScript中获取Radio被选中的值
2015/11/11 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
ES6新特征数字、数组、字符串
2016/10/01 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
微信公众平台开发教程(五)详解自定义菜单
2016/12/02 Javascript
javascript操作cookie
2017/01/17 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
小程序实现录音功能
2020/09/22 Javascript
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python实现自动发送邮件
2018/06/20 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python 三元运算符使用解析
2019/09/16 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
Python基于字典实现switch case函数调用
2020/07/22 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
给校长的建议书300字
2014/05/16 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
人民币符号
2022/02/17 杂记