vue.js生命週期鉤子、過濾器、互動練習001 仿留言板
阿新 • • 發佈:2018-11-01
需求:
- 呼叫介面獲取留言資料
- 過濾時間只取年月日
- 開啟網頁便執行請求
程式碼:
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="vue.js" type="text/javascript" charset="utf-8"></script> <script src="vue-resource.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="div"> <ul> <li v-for="v in arr"> <h4>{{ v.commentTxt }}</h4> <p>{{ v.createAt|time}}</p> </li> </ul> </div> </body> </html> <script type="text/javascript"> //時間過濾只取年月日 Vue.filter('time',function(v){ return v.substr(0,10); }) var vm = new Vue({ el:'#div', data:{ arr:[] }, // 生命週期鉤子,進入網頁就執行請求 beforeCreate: function(){ // 呼叫介面 this.$http.get('http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187').then( function(res){ this.arr=res.data.data.commentList; }, function(res){ alert('呼叫失敗'); } ); } }) </script>