vue如何从接口请求数据

人气：418 时间：2019-04-07

这篇文章主要为大家详细介绍了vue如何从接口请求数据，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

这两天学习了vue如何从接口请求数据，所以，今天添加一点小笔记。

代码如下：


<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>获取图片列表</title>

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />    

  </head>

  <body>

    <div id="app">

      <ul>

        <li>

          <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>

        </li>

      </ul>

    </div>    

  </body>

  <script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>

  <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>

  <script>

    var demo=new Vue({

      el:'#app',

      data: {

        imgList:[],

        getImgUrl: ''  //存数据接口        

      },

      created: function(){

        this.getImg()       //定义方法

      },

      methods: {

        getImg: function(){

          var that = this;    

          that.$http({      //调用接口

            method:'GET',

            url:this.getImgUrl //this指data

          }).then(function(response){ //接口返回数据

            this.imgList=response.data;             

          },function(error){

          })

        }

      }

    })

  </script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/3379-0.html

注：关于vue如何从接口请求数据的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：Vue.js常用指令的使用小结

下一篇：分析Vue 2.0封装axios笔记