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>

 

vue和axios使用get请求api实例

上一篇:【HTML】


下一篇:Json解析异常处理方式(JSONException: Value ?of type java.lang.String cannot be converted to JSONObject)