本文實例為大家分享了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,"city":"尋甸"},{"id":3189,"pid":378,"city":"麒麟區"},{"id":3190,"pid":378,"city":"宣威市"},{"id":3191,"pid":378,"city":"馬龍縣"},{"id":3192,"pid":378,"city":"陸良縣"},{"id":3193,"pid":378,"city":"師宗縣"},{"id":3194,"pid":378,"city":"羅平縣"},{"id":3195,"pid":378,"city":"富源縣"},{"id":3196,"pid":378,"city":"會澤縣"},{"id":3197,"pid":378,"city":"沾益縣"}]; var treeData = createTree({ idname:'id', pidname:'pid', rootid:1, data:data }); function createTree(arg){ var idname = arg.idname, pidname = arg.pidname, rootid = arg.rootid, data = arg.data, treeData = []; var _createTree = function(id){ var ret = []; var index = 0; for(var i = 0; i < data.length; i++){ if(data[i][pidname] == id){ ret[index] = data[i]; ret[index].child = _createTree(data[i][idname]); index++; } } return ret; } var index = 0; for(var i = 0; i < data.length; i++){ if(data[i][pidname] == rootid){ treeData[index] = data[i]; treeData[index].child = _createTree(data[i][idname]); index++; } } return treeData; } Vue.component('item', { template: '#tree-template', props: ['tree'], data: function () { return {} }, methods: { toggle: function (i) { this.tree[i].open = !this.tree[i].open; this.$set(this.tree, i, this.tree[i]); }, isFolder: function (data) { return data.child && data.child.length }, }, }) var vm = new Vue({ el: '#app', data: { treeData: treeData, show:false, }, methods: { hideTree:function(e){ if(e.target.id == 'app'){ console.log(137); this.show = false; } } }, created: function () { function _addOpen(data) { for (var i = 0; i < data.length; i++) { data[i]['open'] = false; if (data[i].child.length > 0) { _addOpen(data[i].child); } } } _addOpen(this.treeData); } }); </script> </body></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
