vuejs之vue.js+axios结合使用

发布时间：2020-12-16 23:03:51 所属栏目：百科来源：网络整理

导读：看一个例子： html head script src ="https://unpkg.com/axios/dist/axios.min.js" / script ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" / body div id ="app" input type ="button" value ="获取笑话" @click ="getJoke" ul li v-for ="(item,index

看一个例子：

<html>

head>
  script src="https://unpkg.com/axios/dist/axios.min.js"></script="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</bodydiv id="app">
    input type="button" value="获取笑话" @click="getJoke"ul>
      li v-for="(item,index) in jokes">
        {{item}}
      lidiv
    var vue = new Vue({
      el: "#app",data: {
        jokes: []
      },methods: {
        getJoke: function () {
          var that = this;
          axios.get('https://autumnfish.cn/api/joke/list?num=3')
            .then(function (response) {
              that.jokes = response.data.jokes;
            },function (err) {

            })
        }
      },})
  >

效果：

点击获取笑话：

获取了三条笑话。

说明：

需要引入：

axios回调平函数中的this已改变，需要先存储vue中的this，才能进行下一步赋值。

和vue本地获取数据的最大区别就是改变了数据的来源。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!