收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > JavaScript技巧 > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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>

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

深入理解vue.js中的v-if和v-show
本文主要给大家介绍了关于vue.js中v-if和v-show的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍:1.共同点都是动态显示DOM元素2.区别(

vue 请求后台数据的实例代码
需要引用vue-resource安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入importVueResourcefrom'vue-resource'Vue.use(VueResource);在package.json文件中加入

详解Vue 2.0封装axios笔记
前言单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等),今天我们主要讲解Ajax部分。最

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号