快捷導(dǎo)航

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

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

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

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

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

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

　　舉個小例子。注意，代碼中使用jQuery、bootstrap。沒有用過bootstrap不影響閱讀本文。

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

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

二、網(wǎng)頁代碼

<table class="table table-bordered table-striped table-condensed" id="recentPlayTable"> 
 <tr> 
  <th>名稱</th><th>時間</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">暫無數(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ù)簡單示例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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