欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例

 更新時間：2018年08月09日 11:27:33   作者：猴哥哥5  
今天小編就為大家分享一篇vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

實例如下所示：

<!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">添加數(shù)據(jù)</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對象實例創(chuàng)建成功之后就會自動調用這個方法
  //如果你想寫的方法在舒適化的時候就被調用的話就要要用到created這個
  created:function () {
   this.getlist();//這里定義這個方法，vue實例之后運行到這里就調用這個函數(shù)
  },
  methods:{
   getlist:function () {
    //請求服務器的api獲取到品牌的數(shù)據(jù)列表
    this.$http.get('http://vueapi.ittun.com/api/getprodlist').then(function (response) {
     //處理服務器異常信息提示
     if(response.body.status!=0)
     {
      alert(response.body.message);
      return ;
     }
     //處理正常的邏輯數(shù)據(jù)處理
     this.list=response.body.message;
     
    });
    

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

以上這篇vue使用ajax獲取后臺數(shù)據(jù)進行顯示的示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

最新評論