vue使用ajax获取后台数据进行显示的示例


Posted in Javascript onAugust 09, 2018

实例如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/vue.min.js"></script>
 <script src="/vue-resource.min.js"></script>
 <style>
  #th th{
   background-color: #50a9fa;
   color: aliceblue;
   font-size: large;
  }
 </style>
</head>
<body >
<div id="app" align="center">
 <input type="text" v-model="id">
 <input type="text" v-model="pname">
 <button @click="addData">添加数据</button>
 <table id="th" border="1"solid width="400px">
  <tr>
   <th>编号</th>
   <th>名称</th>
   <th>时间</th>
   <th>操作</th>
  </tr>
  <tr v-for="item in list ">
   <td>{{item.id}}</td>
   <td>{{item.name}}</td>
   <td>{{item.ctime}}</td>
   <td>
    <a href="javascript:void(0)" rel="external nofollow" >删除</a>
   </td>
  </tr>
 </table>
</div>
<script>
 //vue的生命周期
 
 new Vue({
  el:'#app',
  data:{
   list:[]
  },
  //vue对象实例创建成功之后就会自动调用这个方法
  //如果你想写的方法在舒适化的时候就被调用的话就要要用到created这个
  created:function () {
   this.getlist();//这里定义这个方法,vue实例之后运行到这里就调用这个函数
  },
  methods:{
   getlist:function () {
    //请求服务器的api获取到品牌的数据列表
    this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) {
     //处理服务器异常信息提示
     if(response.body.status!=0)
     {
      alert(response.body.message);
      return ;
     }
     //处理正常的逻辑数据处理
     this.list=response.body.message;
     
    });
    

   }
   
  }
 });
</script>
</body>
</html>

以上这篇vue使用ajax获取后台数据进行显示的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
Jan 09 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
vue3如何优雅的实现移动端登录注册模块
Mar 29 Vue.js
vue中Axios的封装与API接口的管理详解
Aug 09 #Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 #Javascript
基于bootstrap页面渲染的问题解决方法
Aug 09 #Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 #Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 #Javascript
JavaScript引用类型Function实例详解
Aug 09 #Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 #jQuery
You might like
PHP 内存缓存加速功能memcached安装与用法
2009/09/03 PHP
为PHP初学者的8点有效建议
2010/11/20 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php保存二进制原始数据为图片的程序代码
2014/10/14 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
学习ExtJS 访问容器对象
2009/10/07 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
2016/09/23 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
input 标签实现输入框带提示文字效果(两种方法)
2017/10/09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
vue 使用鼠标滚动加载数据的例子
2019/10/31 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
小班开学寄语
2014/04/04 职场文书
装修施工安全责任书
2014/07/24 职场文书
学习教师法的心得体会
2014/09/03 职场文书
紫日观后感
2015/06/05 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书