vue.js树形组件详解，删除双击增加分支

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/">潍坊长途汽车站</a></li>

var demo = new Vue（{//创建一个vue实例，绑定树形数据

el: '#demo',

data: {

treeData: data

}

}）
</script>