vue如何從接口請(qǐng)求數(shù)據(jù)
更新時(shí)間：2017年06月22日 09:46:07 作者：Kymming
本篇文章主要介紹了vue如何從接口請(qǐng)求數(shù)據(jù) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
這兩天學(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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
組件間通信簡單來說就是組件間進(jìn)行數(shù)據(jù)傳遞。就像我們?nèi)粘５拇螂娫?，就是通訊的一種方式，你把話說給我聽，我把話說給你聽，說的話就是數(shù)據(jù)。電話就是通訊方式的一種。無論是 Vue 還是 React ，都得進(jìn)行組件間通信。2021-05-05
vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序小結(jié)
這篇文章主要介紹了vue結(jié)合vue-electron創(chuàng)建應(yīng)用程序,本文給大家介紹了安裝electron有兩種方式，兩種方式創(chuàng)建的項(xiàng)目結(jié)構(gòu)大不相同，需要的朋友可以參考下2024-03-03
Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞
這篇文章主要介紹了Vue通過路由實(shí)現(xiàn)頁面間參數(shù)的傳遞,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
詳解如何解決Vue和vue-template-compiler版本之間的問題
這篇文章主要介紹了詳解如何解決Vue和vue-template-compiler版本之間的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
使用 JSON.stringify() 列化一個(gè)Error
這篇文章主要介紹了使用 JSON.stringify() 列化一個(gè)Error,需要的朋友可以參考下2023-10-10
vue中el-table格式化el-table-column內(nèi)容的三種方法
本文主要介紹了vue中el-table格式化el-table-column內(nèi)容的三種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
Vue雙向綁定是指數(shù)據(jù)模型和視圖之間的數(shù)據(jù)同步，通過Object.defineProperty()方法實(shí)現(xiàn)數(shù)據(jù)劫持，利用觀察者模式實(shí)現(xiàn)數(shù)據(jù)更新和視圖更新的自動(dòng)同步，實(shí)現(xiàn)方式包括指令、計(jì)算屬性、v-model等，優(yōu)化方法包括使用虛擬DOM、合理使用computed和watch等2023-04-04
Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))
這篇文章主要介紹了Vue中使用 Echarts5.0 遇到的一些問題(vue-cli 下開發(fā))，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法
這篇文章主要介紹了tdesign和vue的子組件關(guān)閉是父組件執(zhí)行方法,需要的朋友可以參考下2006-06-06
vant/vue手機(jī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vant/vue手機(jī)端長按事件以及禁止長按彈出菜單實(shí)現(xiàn)方法詳解,需要的朋友可以參考下2022-12-12