当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue如何从接口请求数据

vue如何从接口请求数据

2017年12月12日  | 移动技术网IT编程  | 我要评论

这两天学习了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>

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网