實例如下所示：
<!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獲取后臺數據進行顯示的示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
