vue.js展示AJAX数据简单示例
2017-09-26 19:32
567 查看
最近琢磨了一下vue.js,并在项目中进行了运用,感觉非常好用,强烈推荐。
当通过AJAX方式取回数据后,使用vue.js可以完美地按一定逻辑在页面上的展示数据,代码简单、优美、自然,而且便于与在用的页面框架集成。举个小例子。注意,代码中使用jQuery、bootstrap。
一、页面引用vue.js,不用怀疑真的只引入一个JS就可以开始写代码了。
<script src="../assest/share/script/vue.js"></script>
二、返回的JSON数据示例
[ {"playid":"12113c676a4e4aefac75d793910ea193", "playname":"新建活动", "startDate":"2017-01-01", "guestNum":2, "nickname":"wallimn", "blog":"http://wallimn.iteye.com"} ]
三、html代码
<table class="table table-bordered table-striped table-condensed" id="recentPlayTable"> <tr> <th>名称</th><th>时间</th><th>人数</th> </tr> <tr v-if="loaded==false"> <td colspan="3" class="text-center">正在加载数据......</td> </tr> <tr v-else-if="items.length==0"> <td colspan="3" class="text-center">暂无数据</td> </tr> <template v-else> <tr v-for="item in items"> <td>{{item.playname}}</td> <td>{{item.startDate}}</td> <td >{{item.guestNum}}</td> </tr> </template>
四、Javascript代码
<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数据简单示例讲解
- laravel和vuejs第一个最简单的示例hello Vuejs
- TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
- 用Google Chart API展示简单的数据以及WordPress示例
- [SoOnPerson]使用vue.js 来输出ajax返回的json数据
- vue.js 过滤器、ajax数据、事件监听实例
- Vue.js数据驱动的简单例子
- jQuery基于ajax操作json数据简单示例
- 一个简单的Vue.js组件开发示例
- vue.js---父子组件之间简单的数据传递
- prototype.js简单实现ajax功能示例
- MVC中使用ajax和json传递数据简单示例
- Vue.js--基于$.ajax获取数据并与组件的data绑定
- [js]01semantic&vue&reqwest实现数据的展示
- vue.js和angular.js的数据展示
- 模仿angularjs写了一个简单的HTML模版和js数据填充的示例
- Vue.js——基于$.ajax实现数据的跨域增删查改
- JS简单实现滑动加载数据的方法示例
- Javascript vue.js表格分页,ajax异步加载数据
- vue.js实现数据动态响应 Vue.set的简单应用