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

2019-11-19 13:18:02

字体：大中小

来源：转载

供稿：网友

实例如下所示：

<!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面向对象继承原理与实现方法分析

下一篇：vue中Axios的封装与API接口的管理详解