使用vue調取介面展示資料
阿新 • • 發佈：2018-12-25
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> </head> <body> <div id="box"> <table border="1"> <tr> <th>id</th> <th>標題</th> <th>型別</th> <th>詳情</th> <th>新增時間</th> <th>資訊來源</th> <th>操作</th> </tr> <tr v-for="(v,k) in msg.list"> <td>{{v.id}}</td> <td>{{v.xinwen_name}}</td> <td>{{v.xinwen_type}}</td> <td>{{v.xinwen_text}}</td> <td>{{v.xinwen_date}}</td> <td>{{v.xinwen_yuan}}</td> <!-- <td>{{vo.weixin_name}}</td> --> </tr> </table> </div> <script type = "text/javascript"> window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:[], }, mounted:function () { this.get(); }, methods:{ get:function(){ //傳送get請求 this.$http.get("http://lpk.haoyunyun.cn/xinwena").then(function(res){ this.msg=res.body; },function(){ console.log('請求失敗處理'); }); } } }); } </script> </body> </html>