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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
Jul 04 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
小程序中英文混合排序问题解决
Aug 02 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
PHP中file_get_contents高?用法实例
2014/09/24 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
Javascript实现的分页函数
2007/02/07 Javascript
用JavaScript隐藏控件的方法
2009/09/21 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
修复IE9&amp;safari 的sort方法
2011/10/21 Javascript
JS跨域总结
2012/08/30 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
Jquery实现纵向横向菜单
2016/01/24 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
github配置使用指南
2014/11/18 Python
Python自动连接ssh的方法
2015/03/07 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
Python中 map()函数的用法详解
2018/07/10 Python
python3获取当前目录的实现方法
2019/07/29 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python递归下载文件夹下所有文件
2019/08/31 Python
Python使用matplotlib绘制圆形代码实例
2020/05/27 Python
如何通过python检查文件是否被占用
2020/12/18 Python
中学生自我鉴定
2014/02/04 职场文书
静心口服夜广告词
2014/03/20 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
婚礼父母答谢词
2015/01/04 职场文书
万里长城导游词
2015/01/30 职场文书
胡桃夹子观后感
2015/06/11 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL