Vue ES5 递归多级菜单 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue ES5 递归多级菜单</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var menus = [
            {
                name: "About", path: "/about",
                children: [
                    {name: "About US", path: "/about/us"},
                    {
                        name: "About Comp", path: "/about/company",
                        children: [
                            {
                                name: "About Comp A", path: "/about/company/A",
                                children: [
                                    {
                                        name: "About Comp A 1", path: "/about/company/A/1"
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {name: "Link", path: "/link"}
        ];
    </script>
    <style>
        .item{
            margin:10px 0;
            padding:0 10px;
            border-radius:4px;
            list-style:none;
            background:skyblue;
            color:#FFFFFF;
        }
        #container .wrapper{padding-inline-start:0;}
        .wrapper{cursor:pointer;}
        .wrapper .item-title{font-size:16px;}
    </style>
</head>
<body>
<!-- 主体内容 -->
<div id="container">
    <main-menu :menus="menus"></main-menu>
</div>

<!-- 菜单模板 -->
<script type="x-template" id="menu-temp">
    <ul class="wrapper">
        <li class="item" :key="index" v-for="(item, index) in menus">
            <span class="item-title" v-if="!item.children">{{item.name}}</span>
            <template v-else>
                <span @click="toggle_to_show">{{item.name}} <span v-text="toggle_show?'-':'+'"></span></span>
                <main-menu :menus="item.children" v-if="toggle_show"></main-menu>
            </template>
        </li>
    </ul>
</script>

<script type="text/javascript">
    // 需先定义模板
    Vue.component('main-menu', {
        template: '#menu-temp',
        data: function () {
            return {toggle_show: false};
        },
        props: ["menus"],
        methods: {
            toggle_to_show: function () {
                this.toggle_show = !this.toggle_show;
            }
        }
    });

    new Vue({
        el: '#container',
        data: {
            menus: menus
        }
    });
</script>
</body>
</html>

 

posted @ 2019-11-13 15:07  苦瓜糖水  阅读(244)  评论(0)    收藏  举报