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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
js中top的作用深入剖析
Mar 04 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
浅谈React高阶组件
Mar 28 Javascript
vue-cli项目中使用Mockjs详解
May 14 Javascript
Javascript类型判断相关例题及解析
Aug 26 Javascript
原生JavaScript实现刮刮乐
Sep 29 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 阴历-农历-转换类代码
2012/01/16 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP+JQUERY操作JSON实例
2017/03/23 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
JavaScript 高级语法介绍
2009/06/15 Javascript
浅析js封装和作用域
2013/07/09 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
Python 转义字符详细介绍
2017/03/21 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python根据url地址下载小文件的实例
2018/12/18 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
Django多个app urls配置代码实例
2020/11/26 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
外贸业务员岗位职责
2013/11/24 职场文书
大学生党课思想汇报
2013/12/29 职场文书
八一演出活动方案
2014/02/03 职场文书
大学生学习计划书
2014/09/15 职场文书
庆七一活动简报
2015/07/20 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers