vue實現資料的新增功能
阿新 • • 發佈：2019-01-10
<!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="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)" >刪除</a> </td> </tr> </table> </div> <script> //vue的生命週期 new Vue({ el:'#app', data:{ pname:"", list:[] }, //vue物件例項建立成功之後就會自動呼叫這個方法 //如果你想寫的方法在舒適化的時候就被呼叫的話就要要用到created這個 created:function () { this.getlist();//這裡定義這個方法，vue例項之後執行到這裡就呼叫這個函式 }, methods:{ addData:function () { //實現將資料post到資料新增介面 //獲取使用者填寫的文字框的值,只需要通過this.pname var postData={name:this.pname}; var options={emulateJSON:true}; this.$http.post('http://vueapi.ittun.com/api/getprodlist',postData,options).then(function (response) { if(response.body.status!=0) { alert(response.body.message); return ; } //將文字框中的值清空 this.pname=""; //直接將列表資料重新載入一次 this.getlist();//區域性重新整理一下 }); }, 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>