当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单、优美、自然,而且便于与在用的页面框架集成,本文给大家介绍Vue.js展示AJAX数据简单示例
最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐。
当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单、优美、自然,而且便于与在用的页面框架集成。
感谢vue.js的作者,官方网站地址:https://cn.vuejs.org
举个小例子。注意,代码中使用jQuery、bootstrap。没有用过bootstrap不影响阅读本文。
一、返回的JSON数据示例
[ {"playid":<i>本文来源gaodai$ma#com搞$$代**码网</i>"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> <td>{{item.playname}}</td><td>{{item.startDate}}</td><td>{{item.guestNum}}</td></tr><tr> <td colspan="3" class="text-center">正在加载数据......</td></tr><tr> <td colspan="3" class="text-center">暂无数据</td></tr></table>
以上就是Vue.js展示AJAX数据简单示例讲解的详细内容,更多请关注gaodaima搞代码网其它相关文章!