空间鼠标,古惑仔1qvod,不良情侣片尾曲
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树形组件之删除双击增加分支实例代码,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论