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 相关文章推荐
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
浅谈Vue数据响应
Nov 05 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
浅谈python中get pass用法
2019/03/19 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
python 获取等间隔的数组实例
2019/07/04 Python
pandas 缺失值与空值处理的实现方法
2019/10/12 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
jenkins+python自动化测试持续集成教程
2020/05/12 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
房务中心文员岗位职责
2014/04/16 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
死亡证明书样本说明
2014/10/18 职场文书
信访维稳工作汇报
2014/10/27 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
值班管理制度范本
2015/08/06 职场文书
2015年党风廉政建设个人总结
2015/08/18 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers