1+ < script src ="../../../dist/vue.js "> </ script >
2+ < style >
3+ .item {
4+ cursor : pointer;
5+ font-family : monospace;
6+ color : # 999 ;
7+ }
8+ .item .folder {
9+ color : # 333 ;
10+ }
11+ </ style >
12+
13+ < div id ="demo ">
14+ < ul id ="root ">
15+ < li v-component ="folder " v-with ="model: treeData "> </ li >
16+ </ ul >
17+ </ div >
18+
19+ < script type ="text/x-template " id ="folder-template ">
20+ < div class = "item folder" v-on = "click: open = !open" >
21+ { { model . name} } [{ { open ? '-' : '+' } } ]
22+ </ div >
23+ < ul v - show = "open" >
24+ < li v-repeat = "model: model.children | orderBy 'type'"
25+ v-component = "{{model.type}}" >
26+ </ li >
27+ < / u l >
28+ </ script >
29+
30+ < script type ="text/x-template " id ="file-template ">
31+ < div class = "item file" > { { model . name} } </ div >
32+ </ script >
33+
34+ < script >
35+ Vue . component ( 'folder' , {
36+ template : '#folder-template' ,
37+ data : {
38+ open : false
39+ }
40+ } )
41+
42+ Vue . component ( 'file' , {
43+ template : '#file-template'
44+ } )
45+
46+ var menu = new Vue ( {
47+ el : '#demo' ,
48+ data : {
49+ treeData : {
50+ name : 'My Tree' ,
51+ children : [
52+ { type : 'file' , name : 'hello' } ,
53+ { type : 'file' , name : 'wat' } ,
54+ {
55+ type : 'folder' ,
56+ name : 'child folder' ,
57+ children : [
58+ {
59+ type : 'folder' ,
60+ name : 'child folder' ,
61+ children : [
62+ { type : 'file' , name : 'hello' } ,
63+ { type : 'file' , name : 'wat' }
64+ ]
65+ } ,
66+ { type : 'file' , name : 'hello' } ,
67+ { type : 'file' , name : 'wat' } ,
68+ {
69+ type : 'folder' ,
70+ name : 'child folder' ,
71+ children : [
72+ { type : 'file' , name : 'hello' } ,
73+ { type : 'file' , name : 'wat' }
74+ ]
75+ }
76+ ]
77+ }
78+ ]
79+ }
80+ }
81+ } )
82+ </ script >
0 commit comments