<!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> <p 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> </p> <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>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
react-native封装插件swiper使用步骤详解
fifo/lru实现缓存算法
以上就是vue做出树形菜单步骤详解的详细内容。