vue 點我 ... ...
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="animate.css"> <script src="vue.js"></script> <style> *{ color:#585858; } #app{ min-height: 650px; } #app li{ list-style-type:none; } #app a{ text-decoration:none; } #app button{ width:100%; } #app ul{ padding:10px; } #app span{ cursor:pointer; } #tree{ border: 1px solid #ccc; min-height: 650px; width: 50%; margin:0; padding-top: 10px; background-color:#f2f2f2; position: absolute; top:0; left:0; } #tree li { display: block; padding: 0; margin: 0; border: 0; border-bottom: 1px solid #e5e5e5; min-height: 32px; line-height:32px; } </style> </head> <body> <div id='app' @click='hideTree($event)'> <button @click.stop="show = !show">點我</button> <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft"> <item v-bind:tree='treeData' id='tree' v-if="show"></item> </transition> </div> <template id='tree-template'> <ul> <li v-for='(v,i) in tree'> <span v-if="isFolder(v)" @click="toggle(i)">{{ tree[i].open ? '-' : '+' }}</span> <a data-id="v.id">{{v.city}}</a> <item v-bind:tree='v.child' v-show="tree[i].open"></item> </li> </ul> </template> <script> var data = [{"id":26,"pid":1,"city":"四川省"},{"id":30,"pid":1,"city":"雲南省"},{"id":322,"pid":26,"city":"成都"},{"id":323,"pid":26,"city":"綿陽"},{"id":324,"pid":26,"city":"阿壩"},{"id":325,"pid":26,"city":"巴中"},{"id":326,"pid":26,"city":"達州"},{"id":327,"pid":26,"city":"德陽"},{"id":328,"pid":26,"city":"甘孜"},{"id":329,"pid":26,"city":"廣安"},{"id":330,"pid":26,"city":"廣元"},{"id":331,"pid":26,"city":"樂山"},{"id":332,"pid":26,"city":"涼山"},{"id":333,"pid":26,"city":"眉山"},{"id":334,"pid":26,"city":"南充"},{"id":335,"pid":26,"city":"內江"},{"id":336,"pid":26,"city":"攀枝花"},{"id":337,"pid":26,"city":"遂寧"},{"id":338,"pid":26,"city":"雅安"},{"id":339,"pid":26,"city":"宜賓"},{"id":340,"pid":26,"city":"資陽"},{"id":341,"pid":26,"city":"自貢"},{"id":342,"pid":26,"city":"瀘州"},{"id":367,"pid":30,"city":"昆明"},{"id":378,"pid":30,"city":"曲靖"},{"id":3100,"pid":367,"city":"盤龍區"},{"id":3101,"pid":367,"city":"五華區"},{"id":3102,"pid":367,"city":"官渡區"},{"id":3103,"pid":367,"city":"西山區"},{"id":3104,"pid":367,"city":"東川區"},{"id":3105,"pid":367,"city":"安寧市"},{"id":3106,"pid":367,"city":"呈貢縣"},{"id":3107,"pid":367,"city":"晉寧縣"},{"id":3108,"pid":367,"city":"富民縣"},{"id":3109,"pid":367,"city":"宜良縣"},{"id":3110,"pid":367,"city":"嵩明縣"},{"id":3111,"pid":367,"city":"石林縣"},{"id":3112,"pid":367,"city":"祿勸"},{"id":3113,"pid":367,
