最近琢磨了一下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數據簡單示例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
