快捷導(dǎo)航

Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例講解

更新時(shí)間：2017年03月29日 10:29:29 投稿：mrr

當(dāng)通過(guò)AJAX方式取回?cái)?shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁(yè)面上的展示數(shù)據(jù)，代碼簡(jiǎn)單、優(yōu)美、自然，而且便于與在用的頁(yè)面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例

最近琢磨了一下vue.js，并在項(xiàng)目中進(jìn)行了運(yùn)用，感覺(jué)非常好用，強(qiáng)烈推薦。

　　當(dāng)通過(guò)AJAX方式取回?cái)?shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁(yè)面上的展示數(shù)據(jù)，代碼簡(jiǎn)單、優(yōu)美、自然，而且便于與在用的頁(yè)面框架集成。

　　感謝vue.js的作者，官方網(wǎng)站地址：https://cn.vuejs.org

　　舉個(gè)小例子。注意，代碼中使用jQuery、bootstrap。沒(méi)有用過(guò)bootstrap不影響閱讀本文。

一、返回的JSON數(shù)據(jù)示例

[ 
{"playid":"12113c676a4e4aefac75d793910ea193", 
"playname":"新建活動(dòng)", 
"startDate":"2017-01-01", 
"guestNum":2, 
"nickname":"wallimn", 
"blog":"http://wallimn.iteye.com"} 
]

二、網(wǎng)頁(yè)代碼

<table class="table table-bordered table-striped table-condensed" id="recentPlayTable"> 
 <tr> 
  <th>名稱</th><th>時(shí)間</th><th>人數(shù)</th> 
 </tr> 
 <tr v-for="item in items"> 
  <td>{{item.playname}}</td> 
  <td>{{item.startDate}}</td> 
  <td>{{item.guestNum}}</td> 
 </tr> 
 <tr v-if="loaded==false"> 
  <td colspan="3" class="text-center">正在加載數(shù)據(jù)......</td> 
 </tr> 
 <tr v-if="loaded==true && items.length==0"> 
  <td colspan="3" class="text-center">暫無(wú)數(shù)據(jù)</td> 
 </tr> 
</table> 
<script type="text/javascript"> 
 var playTableVue = new Vue({ 
  el:"#recentPlayTable", 
  data:{ 
   items:[], 
   loaded:false 
  } 
 }); 
 $(function (){ 
  $.getJSON("JSON",{playid:'${play.playid}'},function(json){ 
   if(!json)json=[]; 
   playTableVue.items=json; 
   playTableVue.loaded=true; 
  }); 
 }); 
</script>

以上所述是小編給大家介紹的Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

全站最詳細(xì)的Vuex教程
vuex是一個(gè)專門為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了全站最詳細(xì)的Vuex教程,需要的朋友可以參考下
2018-04-04
Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作
這篇文章主要介紹了Vue.js使用axios動(dòng)態(tài)獲取response里的data數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue中標(biāo)簽自定義屬性的使用及說(shuō)明
這篇文章主要介紹了vue中標(biāo)簽自定義屬性的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue解決跨域問(wèn)題(推薦)
這篇文章主要介紹了vue解決跨域問(wèn)題，本文通過(guò)實(shí)例圖文相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-11-11
Vue3生命周期函數(shù)和方法詳解
本文詳細(xì)講解了Vue3生命周期函數(shù)和方法。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-12-12
一步步教你用Vue.js創(chuàng)建一個(gè)組件(附代碼示例)
組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,下面這篇文章主要給大家介紹了關(guān)于如何一步步用Vue.js創(chuàng)建一個(gè)組件的相關(guān)資料,需要的朋友可以參考下
2022-12-12
vue3基礎(chǔ)組件開發(fā)detePicker日期選擇組件示例
這篇文章主要為大家介紹了vue3基礎(chǔ)組件開發(fā)-detePicker（日期選擇組件）示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue輕松實(shí)現(xiàn)水印效果
這篇文章主要為大家詳細(xì)介紹了vue輕松實(shí)現(xiàn)水印效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
Vue組件開發(fā)之LeanCloud帶圖形校驗(yàn)碼的短信發(fā)送功能
Vue是目前使用較廣泛的三大前端框架之一，其數(shù)據(jù)驅(qū)動(dòng)及組件化的特性使得前端開發(fā)更為快捷便利。本文在LeanCloud 短信轟炸與圖形校驗(yàn)碼官方文檔基礎(chǔ)上，從封裝需要出發(fā)開發(fā)一個(gè)簡(jiǎn)單的短信圖形驗(yàn)證Vue組件,具體內(nèi)容詳情大家參考下本文
2017-11-11
vue自定義指令實(shí)現(xiàn)一鍵復(fù)制功能
本文旨在記錄解決在工作中一鍵復(fù)制功能得需求,本文主要使用了Vue3+TypeScript+Ant-Design-Vue,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-11-11