vue json樹形,是用vue框架解析json格式數據的樹型控件。它具有易于使用、強大而靈活的特點,常用于展示數據以及數據篩選、搜索等操作。
以下是一個生成vue json樹形的示例代碼:
//數據格式
let treeData = {
label: 'tree',
children: [
{
label: 'node1',
children: [
{ label: 'node1-1' },
{ label: 'node1-2' }
]
},
{
label: 'node2',
children: [
{ label: 'node2-1' },
{ label: 'node2-2' }
]
}
]
};
//注冊tree組件
Vue.component('tree', {
template: '#tree-template',
props: {
model: Object
},
data: function () {
return {
open: false
}
},
computed: {
isFolder: function () {
return this.model.children &&
this.model.children.length
}
},
methods: {
toggle: function () {
if (this.isFolder) {
this.open = !this.open
}
},
changeSelected: function () {
alert(this.model.label)
}
}
});
//實例化vue
new Vue({
el: '#app',
data: {
treeData: treeData
}
});
這是一個簡單的vue組件,采用了遞歸的方式來展示json樹形結構。其中,template
標簽中定義了vue的模板,結構中包含了邏輯判斷、事件綁定等多項vue功能,除此之外,組件中還包含了props、data、computed和methods四大模塊,用于管理數據和交互行為。最后在vue實例的el
屬性中指定了組件的容器元素,即可讓json樹形展示在頁面中。