欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年03月29日 10:29:29   投稿：mrr  
當(dāng)通過AJAX方式取回?cái)?shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡(jiǎn)單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡(jiǎn)單示例

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

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

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

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

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

[ 
{"playid":"12113c676a4e4aefac75d793910ea193", 
"playname":"新建活動(dòng)", 
"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>時(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">暫無數(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論