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实现代码
Oct 01 Javascript
javascript中的document.open()方法使用介绍
Oct 09 Javascript
ExtJs中gridpanel分组后组名排序实例代码
Dec 02 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
创建一般js对象的几种方式
Jan 19 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
vue获取DOM元素并设置属性的两种实现方法
Sep 30 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 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静态方法与非静态方法的用法区别
2016/05/17 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
基于jQuery的表格操作插件
2010/04/22 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
jquery鼠标放上去显示悬浮层即弹出定位的div层
2014/04/25 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript中通过提示框跳转页面的方法
2016/02/14 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
Python实现文件复制删除
2016/04/19 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python cs架构实现简单文件传输
2020/03/20 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python实现单链表的方法示例
2019/09/03 Python
使用python实现数组、链表、队列、栈的方法
2019/12/20 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
祖国在我心中演讲稿600字
2014/05/04 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
法人授权委托书范本
2014/09/17 职场文书
2015年化验员工作总结
2015/04/10 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python