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 拖放效果实现代码
Jan 22 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
Feb 23 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
js中的面向对象入门
Mar 06 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
vue环境搭建简单教程
Nov 07 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
php封装的图片(缩略图)处理类完整实例
2016/10/19 PHP
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
基于jquery的高性能td和input切换并可修改内容实现代码
2011/01/09 Javascript
jQuery 隐藏和显示 input 默认值示例
2014/06/03 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JSON取值前判断
2014/12/23 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
js实现登录验证码
2016/12/22 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
Vue.js实现图片的随意拖动方法
2018/03/08 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
2018/08/19 Javascript
vue实现动态列表点击各行换色的方法
2018/09/13 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
在Python中处理时间之clock()方法的使用
2015/05/22 Python
python实现Flappy Bird源码
2018/12/24 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python实现名片管理器的示例代码
2019/12/17 Python
三星印度官网:Samsung印度
2019/08/03 全球购物
毕业证代领委托书
2014/09/26 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript