[Vue]实现无限级导航树目录

最新推荐文章于 2024-05-16 07:47:36 发布

iChangebaobao

最新推荐文章于 2024-05-16 07:47:36 发布

阅读量1.1k

点赞数 2

分类专栏： Vue JavaScript

本文链接：https://blog.csdn.net/iChangebaobao/article/details/103799895

版权

Vue 同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

JavaScript

49 篇文章 2 订阅

订阅专栏

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限级树结构</title>
    <style>
        [v-cloak] {
            display: none;
        }
        .list {
            width: 100%;
            height: 600px;
        }
        ul li {
            list-style-type: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="list" v-html="ListLoad"></div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script>
        // var TreeData = [
        //     {
        //         name: 'IT互联网',
        //         child: [
        //             { name: '编程语言', child: [{ name: 'java' }, { name: 'python' }, { name: 'JavaScript' }] },
        //             { name: '移动开发', child: [{ name: 'Android开发' }, { name: 'IOS开发' }] },
        //             { name: '游戏开发', child: [{ name: 'phaser游戏开发' }, { name: 'webGL游戏开发' }, { name: '3D游戏开发' }] }
        //         ]
        //     },
        //     {
        //         name: '设计创作',
        //         child: [
        //             { name: '平面设计', child: [{ name: '电商美工' }, { name: '综合平面设计' }, { name: '摄影后期' }] },
        //             { name: 'UI设计', child: [{ name: '交互设计' }, { name: 'webUI设计' }, { name: '游戏UI设计' }] },
        //             { name: '软件设计' }
        //         ]
        //     }, {
        //         name: '升学考研',
        //         child: [
        //             { name: '考研', child: [{ name: '大学', child: [{ name: '高中', child: [{ name: '初中', child: [{ name: '小学' }] }] }] }] },
        //         ]
        //     },
        //     {
        //         name: '职企考证',
        //         child: [{ name: '公务员' }, { name: '教师资格' }, { name: '监理师' }, { name: '司法考试' }, { name: '会计资格' }]
        //     }
        // ]
        $(function () {
            //     function createTree(data) {
            //         var str = "<ul>";
            //         for (var i = 0; i < data.length; i++) {
            //             str += '<li><span class="bg"></span>' + data[i].name ;
            //             if (data[i].child) {
            //                 str += createTree(data[i].child);
            //             }
            //             str+= '</li>';
            //         }
            //         str += '</ul>'
            //         return str;
            //     }
            //     $('.list').html(createTree(TreeData));
			//点击事件
            $('.list ul li').click(function (event) {
                // 阻止冒泡
                event.stopPropagation();
                // is() 方法用于查看选择的元素是否匹配选择器。
                if ($(this).find('ul').is(':visible')) {
                    // 隐藏 
                    $(this).find('ul').css('display', 'none');
                    // .find() 方法允搜索这些元素的后代，并用匹配元素来构造一个新的 jQuery 对象。
                    // .find() 与 .children() 方法类似，不同的是后者仅沿着 DOM 树向下遍历单一层级。
                    $(this).find('span').text('+');
                } else {
                    // 显示
                    $(this).find('ul').css('display', 'block');
                    $(this).find('span').text('-');
                }
            });
        }); 
        var app = new Vue({
            el: '#app',
            data: {
                ListLoad: '',
                TreeData: [
                    {
                        name: 'IT互联网',
                        child: [
                            { name: '编程语言', child: [{ name: 'java' }, { name: 'python' }, { name: 'JavaScript' }] },
                            { name: '移动开发', child: [{ name: 'Android开发' }, { name: 'IOS开发' }] },
                            { name: '游戏开发', child: [{ name: 'phaser游戏开发' }, { name: 'webGL游戏开发' }, { name: '3D游戏开发' }] }
                        ]
                    },
                    {
                        name: '设计创作',
                        child: [
                            { name: '平面设计', child: [{ name: '电商美工' }, { name: '综合平面设计' }, { name: '摄影后期' }] },
                            { name: 'UI设计', child: [{ name: '交互设计' }, { name: 'webUI设计' }, { name: '游戏UI设计' }] },
                            { name: '软件设计' }
                        ]
                    }, {
                        name: '升学考研',
                        child: [
                            { name: '考研', child: [{ name: '大学', child: [{ name: '高中', child: [{ name: '初中', child: [{ name: '小学' }] }] }] }] },
                        ]
                    },
                    {
                        name: '职企考证',
                        child: [{ name: '公务员' }, { name: '教师资格' }, { name: '监理师' }, { name: '司法考试' }, { name: '会计资格' }]
                    }
                ]
            },
            mounted: function () {
                console.log("mount之后");
                var that=this;
                this.ListLoad = this.createTree(that.TreeData); 
            },
            updated: function () {
                console.log("更新之后");
            },
            methods: {
                createTree(data) {
                    var str = "<ul>";
                    for (var i = 0; i < data.length; i++) {
                        str += '<li><span></span>' + data[i].name;
                        if (data[i].child) {
                            str += this.createTree(data[i].child);
                        }
                        str+= '</li>';
                    }
                    str += '</ul>'
                    return str;
                }
            }
        }); 
    </script> 
</body> 
</html>

效果
在这里插入图片描述
姊妹篇，喜欢关注并点个赞哟
Vue实现二级导航树目录

iChangebaobao

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
[Vue]实现无限级导航树目录

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalab...
复制链接

扫一扫