vue 小项目（箭头函数的用法）

最新推荐文章于 2025-07-01 11:50:42 发布

hqweay

最新推荐文章于 2025-07-01 11:50:42 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： axios vue api

本文链接：https://blog.youkuaiyun.com/hqweay/article/details/81187862

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Vue.js结合Axios实现动态加载新闻列表，通过API获取数据并显示在网页上，同时提供了分页功能。文章详细展示了HTML、CSS和JavaScript代码，以及如何设置Vue实例和Axios请求。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <span>知乎</span>
            </li>
            <li>
                <a href="">首页</a>
            </li>
            <li>
                <a href="">发现</a>
            </li>
            <li>
                <a href="">话题</a>
            </li>
            <li>
                <div>
                    <input type="text" value="" placeholder="搜索你感兴趣的内容" />
                    <span>搜索</span>
                </div>
            </li>
            <li class="info">
                <div>消息</div>
            </li>

        </ul>

    </div>
    <!-- <div onclick="test()" class="content">

    </div> -->

    <div id="app">
        <button v-on:click="haha"> 查看新闻</button>
        <button v-on:click="next"> 下一页</button>

        <div class="news">
            <li v-for="message of messages">
                {{ message.content }}
            </li>


        </div>

    </div>

    <footer>
        designed by etob
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <style type="text/css">
        body {
            width: 75%;
            margin: 0 auto;
            text-align: center;
        }

        .nav {
            height: 45px;
            border-bottom: 1px solid red;
            margin-bottom: 15px;
        }

        ul {
            display: flex;
            list-style: none;

        }

        a {
            text-decoration: none;
        }

        li {
            margin-left: 2%;

        }

        .info {
            justify-content: end;
            margin-left: 20%;
        }

        input {
            padding: 0;
            border: 55%;
        }

        .content {
            margin: 0 auto;
            width: 500px;
            height: 500px;
            background: aquamarine;
        }

        footer {
            text-align: center;
        }

        #app .news {
            text-align: start;
        }

        #app li {
            list-style: none;
        }
    </style>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                messages: [
                    {}
                ],
                page: 1
            },
            methods: {
                haha: function test() {

                    // alert("SS");
                    // 可选地，上面的请求可以这样做
                    axios.get('https://www.apiopen.top/satinCommentApi?id=27610708', {
                        params: {
                            page: this.page
                        }
                    }).then((data) => {
                        console.log(data.data.data.normal.list);
                        //Vue.set(app, 'messages', data.data.data.normal.list)
                        this.messages = data.data.data.normal.list;
                        //Vue.set(app.messages, data.data.data.normal.list)
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                //这里用 箭头函数的话 取不到 this.page
                next: function () {
                    this.page = (parseInt(app.page) + 1);
                    alert(this.page);
                    axios.get('https://www.apiopen.top/satinCommentApi?id=27610708', {
                        params: {
                            page: this.page
                        }
                    }).then((data) => {
                        Vue.set(app, 'messages', data.data.data.normal.list)
                    }).catch(function (error) {
                        console.log(error);
                    });
                }
            }
        })


    </script>
</body>

</html>