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树形组件之删除双击增加分支实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持!