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

人气：458 时间：2019-04-11

这篇文章主要为大家详细介绍了vue使用ajax获取后台数据进行显示的示例，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

实例如下所示：

代码如下：


<!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获取后台数据进行显示的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/5900-0.html

注：关于vue使用ajax获取后台数据进行显示的示例的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js

您可能感兴趣的文章

上一篇：Vue全局分页组件的实现代码

下一篇：vue 动态绑定背景图片的方法