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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
基于jquery的滚动条滚动固定div(附演示下载)
Oct 29 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 Javascript
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实现的简易扫雷游戏实例
2015/07/09 PHP
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
影响jQuery使用的14个方面
2014/09/01 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
2015/08/11 Javascript
jQuery过滤选择器用法示例
2016/09/12 Javascript
leaflet的开发入门教程
2016/11/17 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
js实现树形数据转成扁平数据的方法示例
2020/02/27 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
让python json encode datetime类型
2010/12/28 Python
python实现ftp客户端示例分享
2014/02/17 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python爬取youtube视频的示例代码
2021/03/03 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
物流管理应届生求职信
2013/11/07 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
大学生学年自我鉴定
2014/02/10 职场文书
学生会离职感言
2014/02/11 职场文书
导游个人求职信范文
2014/03/23 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
应急处置方案
2014/06/16 职场文书
学习优秀党员杨宗兴先进事迹材料思想汇报
2014/09/14 职场文书
校园广播稿精选
2014/10/01 职场文书
党员带头倡议书
2015/04/29 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
Python连续赋值需要注意的一些问题
2021/06/03 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers