最近琢磨了一下vue.js，并在項目中進行了運用，感覺非常好用，強烈推薦。

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

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

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

一、返回的JSON數據示例

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

二、網頁代碼

<table class="table table-bordered table-striped table-condensed" id="recentPlayTable">  <tr>   <th>名稱</th><th>時間</th><th>人數</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">正在加載數據......</td>  </tr>  <tr v-if="loaded==true && items.length==0">   <td colspan="3" class="text-center">暫無數據</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數據簡單示例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！