Vue.js展示AJAX数据简单示例讲解


Posted in Javascript onMarch 29, 2017

最近琢磨了一下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数据简单示例,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js与C#进行时间戳转换
Nov 14 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
详解package.json版本号规则
Aug 01 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
详解Angular Karma测试的持续集成实践
Nov 15 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
JavaScript实现串行请求的示例代码
Sep 14 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 #Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 #Javascript
js实现一个简单的数字时钟效果
Mar 29 #Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 #jQuery
Vue2组件tree实现无限级树形菜单
Mar 29 #Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 #Javascript
Vue.js 插件开发详解
Mar 29 #Javascript
You might like
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php使用curl实现简单模拟提交表单功能
2017/05/15 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
jquery创建div 实现代码
2009/04/27 Javascript
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JavaScript 注册事件代码
2011/01/27 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
js实现select下拉框选择
2020/01/11 Javascript
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
详解Python验证码识别
2016/01/25 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python 构造三维全零数组的方法
2018/11/12 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
教师评优的个人自我评价分享
2013/09/19 职场文书
政府班子四风问题整改措施思想汇报
2014/10/08 职场文书
高中生旷课检讨书
2014/10/08 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers