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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
jstree的简单实例
Dec 01 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
谈谈JS中的!!
Dec 07 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
解决vue+elementui项目打包后样式变化问题
Aug 03 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
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
PHP strtr() 函数使用说明
2008/11/21 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
2012/02/03 Javascript
javascript控制在光标位置插入文字适合表情的插入
2014/06/09 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
javascript 中事件冒泡和事件捕获机制的详解
2017/09/01 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
2020/05/09 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python命名空间详解
2014/08/18 Python
Python中的with...as用法介绍
2015/05/28 Python
对python字典过滤条件的实例详解
2019/01/22 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
Python实现Event回调机制的方法
2019/02/13 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
关于python中的xpath解析定位
2020/03/06 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
生物制药专业自我鉴定
2014/02/19 职场文书
文艺晚会主持词
2014/03/24 职场文书
企业安全生产责任书
2014/04/14 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
交通事故被告答辩状
2015/05/22 职场文书
2015年社区国庆节活动总结
2015/07/30 职场文书
2016春季幼儿园小班开学寄语
2015/12/03 职场文书