vue js 实现 树形菜单

添加一个模板。
<template id="menu-template">
    <li v-if="model.nodes!=undefined">
        <a href="#" class="menu-dropdown"> <i class="menu-icon ${child.icon!''}"></i> <span class="menu-text">
                    {{model.title}} </span> <i class="menu-expand"></i>
        </a>
        <ul class="submenu">
            <item  v-for="model in model.nodes"   :model="model"></item>
        </ul>
    </li>

    <li v-else>
        <a href="javascript:void(0)" data-url=""><i class="menu-icon "

:class="model.icon"

></i> <!-- 图标 --> <span class="menu-text">{{model.title}}</span></a> </li> </template>

注册组件
Vue.component('item', {
        template: '#menu-template',
        props: {
            model: Object
        }
    }) 

$.post("http://127.0.0.1:88/admin/getFunctionJson.action", null, function(data) {
        var app = new Vue({
            el: "#app",
            data: data
        })
    })

 

使用：

<item  v-for="model in message" :model="model"></item>   message 为一个 数组

 

 

<!-- 树形菜单... -->
<template id="menu-template">
    <li v-if="model.nodeList!=undefined" class="treeview">
        <a href="#" class="menu-dropdown"> <i class="fa" :class="model.icon"></i>
            <span>
        {{model.title}}</span> <i class="fa fa-angle-left pull-right"></i></span>
        </a>
        <ul class="treeview-menu">
            <item v-for="model in model.nodeList" :key="model.id" :model="model"></item>
        </ul>
    </li>

    <li v-else>
        <a href="javascript:void(0)" data-url=""><i class="fa" :class="model.icon"></i>
            <!-- 图标  -->
            <span>{{model.title}}</span></a>
    </li>
</template>
<script>
    Vue.component('item', {
        template: '#menu-template',
        props: {
            model: Object
        }
    })
    var message = [];
    $.post("{$ctx}/admin/auth/getFuncTree", null, function (data) {
        var obj = {};
        obj.message = data;
        var app = new Vue({
            el: "#app",
            data: obj
        })
    })