需求:
- 调用接口获取留言数据
- 过滤时间只取年月日
- 打开网页便执行请求
代码:
<!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>