Vue+mock+axios实现侧边动态导航栏

最新推荐文章于 2024-05-28 11:44:38 发布

ι丶小叫花子灬

最新推荐文章于 2024-05-28 11:44:38 发布

阅读量262

点赞数

分类专栏： vue 文章标签： vue javascript css js

本文链接：https://blog.csdn.net/qq_25245553/article/details/105560092

版权

vue 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

最近在上芳姐的课程，由于本人不会写接口，直接使用mock模拟了一个接口

直接上代码
首先是Html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二级导航</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <script type="text/javascript" src="./js/common/mock.js"></script>
    <script type="text/javascript" src="./js/common/axios.js"></script>
    <script type="text/javascript" src="./js/common/vue.js"></script>
    <script type="text/javascript" src="./js/index.js"></script>
    <script type="text/javascript" src="./js/navTag.js"></script>
</head>
<body>
    <div class="tree" id="myNav">
        <ul>
            <li class="p_item" v-for="(item, i) in items" :key="i">
                <a class="p_tittle" :class="curId === i ? 'selected' : ''" @click="curId=i">
                    <i class="iconfont" :class="item.icon"></i>{{item.name}}
                    <b :class="curId === i ? 'down' : 'up'">^</b>
                </a>
                <ul class="c_item" v-show="curId === i">
                    <li v-for="(sub, j) in item.subItems" :key="j">
                        <a>{{sub.name}}</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

js部分

window.onload = () => {
    new Vue({
        el: '#myNav',
        data: {
            curId: 0,
            items: []
        },

        mounted () {
            this.getNavTags()
        },

        methods: {
            openCurrent (item) {
                // 方法1
                // if(item.flag) {
                //     item.flag = false
                // }else {
                //     item.flag = true
                // }

                // 方法2
                // item.flag ? item.flag = false : item.flag = true

                // 方法3
                item.flag = !item.flag
                this.items.forEach(f => {
                    f.flag = false
                })
                item.flag = true
            },

            getNavTags () {
                axios({
                    methods: 'get',
                    url: '/api/getNavItems'
                }).then(res => {
                    console.log(res.data.items)
                    this.items = res.data.items
                }).catch(err => {
                    console.log(err)
                })
            }
        }
    })
}

mock部分

Mock.mock('/api/getNavItems', {
    'items|5': [
        {
            'name|+1': ['H5前端', 'Java', '大数据', '数据库', 'Android'],
            'icon|+1': ['iconh', 'iconjava', 'icondashuju', 'iconSecondMenu-database', 'iconanzhuo_huaban'],
            'subItems|3': [
                {
                    'name|+1': ['Html', 'Css', 'JavaScript', 'SpringBoot', 'Hibernate', 'MyBatis', 'Hadoop', 'Shell', 'Linux', 'MySQL核心', 'MySQL高级', 'Oracle', '快速入门', 'Service', 'OKHttp']
                }
            ]
        }
    ]
})

总结，由于公司一直使用jquery开发项目，而vue强调的是数据驱动视图，因此需要摒弃传统操作dom的思想，本案例适合那些vue的初学者，希望能够提供帮助！

ι丶小叫花子灬

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue+mock+axios实现侧边动态导航栏

参考芳姐的课程，由于本人不会写接口，直接使用mock模拟了一个接口直接上代码首先是Html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,...
复制链接

扫一扫