1. 另外一种写法的axios网络请求

1.1 代码


<!DOCTYPE html>
<html lang="en">
<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 id="app">
        <h1>{{p}}</h1>
        <button @click="btnUp">上一页</button>
        <button @click="btnDown">下一页</button>
        <ul>
            <li v-for="item in listArr">{{item.title}}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script src="./js/axios.min.js"></script>
    <script>
        var vm=new Vue({
           el:'#app',
           data:{
               p: 1,
               listArr:[]
           },
           methods:{
               btnUp(){
                   this.p--;
                   if(this.p <= 0){
                       this.p=1;
                       return
                   }
                   this.getData();
               },
               btnDown(){
                   this.p++;
                   if(this.p > this.listArr.length){
                       this.p = this.listArr.length;
                       return
                   }
                   this.getData()
               },
               getData(){
                    axios({
                        url: "https://ku.qingnian8.com/dataApi/qingKu/getList.php",
                        params: {
                            page: this.p
                        }
                    }).then((res)=>{
                        console.log(res)
                        this.listArr=res.data
                    });
                }
           },
           created(){
               this.getData();//调用getData函数
           }
        });
    </script>
</body>

</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/2.9.html

最后修改:2021 年 02 月 22 日 01 : 44 PM