快捷導(dǎo)航

vue如何從接口請(qǐng)求數(shù)據(jù)

更新時(shí)間：2017年06月22日 09:46:07 作者：Kymming

本篇文章主要介紹了vue如何從接口請(qǐng)求數(shù)據(jù) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

這兩天學(xué)習(xí)了vue如何從接口請(qǐng)求數(shù)據(jù)，所以，今天添加一點(diǎn)小筆記。

<!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="http://cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>

  <script src="http://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: ''  //存數(shù)據(jù)接口        

      },

      created: function(){

        this.getImg()       //定義方法

      },

      methods: {

        getImg: function(){

          var that = this;    

          that.$http({      //調(diào)用接口

            method:'GET',

            url:this.getImgUrl //this指data

          }).then(function(response){ //接口返回?cái)?shù)據(jù)

            this.imgList=response.data;             

          },function(error){

          })

        }

      }

    })

  </script>

</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

詳解vue之頁(yè)面緩存問(wèn)題(基于2.0)
本篇文章主要介紹了vue之頁(yè)面緩存問(wèn)題(基于2.0)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
vue項(xiàng)目中mock.js的使用及基本用法
mockjs是用來(lái)模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒(méi)有開(kāi)發(fā)出來(lái)時(shí)獨(dú)立開(kāi)發(fā)。這篇文章主要介紹了vue項(xiàng)目中mock.js的使用,需要的朋友可以參考下
2019-05-05
Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法
本文主要介紹了Vue+element使用row-class-name修改el-table某一行解決背景色無(wú)效的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-01-01
如何使用Webpack優(yōu)化Vue項(xiàng)目的打包流程
在開(kāi)發(fā)基于Vue.js的應(yīng)用時(shí),隨著項(xiàng)目規(guī)模的擴(kuò)大,單個(gè)文件的體積也會(huì)隨之增長(zhǎng),特別是當(dāng)涉及到大量的依賴庫(kù)和復(fù)雜的業(yè)務(wù)邏輯時(shí),本文將詳細(xì)介紹如何使用Webpack來(lái)優(yōu)化Vue項(xiàng)目的打包流程,需要的朋友可以參考下
2024-09-09
vue如何搭建多頁(yè)面多系統(tǒng)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了vue搭建多頁(yè)面多系統(tǒng)應(yīng)用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue實(shí)現(xiàn)引入本地json的方法分析
這篇文章主要介紹了vue實(shí)現(xiàn)引入本地json的方法,結(jié)合實(shí)例形式分析了vue.js加載本地json文件及解析json數(shù)據(jù)相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
Vue配置代理(devServer)解決跨域問(wèn)題
這篇文章主要介紹了Vue配置代理(devServer)解決跨域問(wèn)題,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-08-08
純前端使用Vue3上傳文件到minio文件服務(wù)器(粘貼可直接用)
vue是目前最流行的前端框架,下面這篇文章主要給大家介紹了關(guān)于純前端使用Vue3上傳文件到minio文件服務(wù)器的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
圖片預(yù)覽插件vue-photo-preview的使用示例詳解
這篇文章主要介紹了圖片預(yù)覽插件vue-photo-preview的使用,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-08-08
在Vue項(xiàng)目中引入Echarts繪制K線圖的方法技巧
在Vue項(xiàng)目開(kāi)發(fā)中,數(shù)據(jù)可視化是一項(xiàng)重要的任務(wù),Echarts是一個(gè)由百度開(kāi)源的數(shù)據(jù)可視化庫(kù),提供了豐富的圖表類型和強(qiáng)大的交互功能,其中,K線圖常用于展示金融數(shù)據(jù)的走勢(shì),本文將詳細(xì)介紹如何在Vue項(xiàng)目中引入Echarts并繪制K線圖,需要的朋友可以參考下
2025-04-04