axios+vue 实现api调用并展示
***
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<div id=”app”>
<input type=”button” value=”点击刷新” @click=’add’ >
<ul v-for='(i,index) in message’>
<li><p>{{index+1}}. {{i}} <button @click=’del(index)’>删除</button></p></li>
</ul>
</div>
</body>
<script>
var app = new Vue({
el:’#app’,
data:{
message:[‘点击刷新即可增加笑话’],
},
methods:{
add:function(){
var that=this;
axios.get(‘https://autumnfish.cn/api/joke’)
.then(function(response){
console.log(response);
// that.message=response.data;
that.message.push(response.data)
},function(err){
console.log(err);
})
},
del:function(index){
this.message.splice(index,1);
},
},
})
</script>
</html>
***本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-04-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读