2021-7-6 vue和axios使用get请求api实例 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<ul>
  <li v-for="item in message">{{item}}</li>
</ul>
<input type="button" value="显示" @click="getJoke">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message:[]
  },
  methods:{
  getJoke:function(){
    var that=this;
    axios.get("https://autumnfish.cn/api/joke/list?num=6")
      .then(function(response){
        for(var i=0;;i++){
        if(response.data.jokes[i]==null){
        break;}
        that.message.push(response.data.jokes[i]);
        }
      },function(err){
      console.log(err);
      })
    }
  }
})
</script>
</body>
</html>

 

posted @ 2021-07-02 09:27  月长生  阅读(130)  评论(0)    收藏  举报