vue如何从接口请求数据

2019-11-19 16:17:00

字体：大中小

来源：转载

供稿：网友

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

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

上一篇：深入理解vue.js中的v-if和v-show

下一篇：利用node.js制作命令行工具方法教程（一）