vuejs之vue.js+axios结合使用

前端开发 作者: 2024-08-26 09:50:01
看一个例子: <html> <head> <script src="https://unpkg.com/axios/dist/axios.min.js"
<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) {

            })
        }
      },})
  >
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
axios回调平函数中的this已改变,需要先存储vue中的this,才能进行下一步赋值。
和vue本地获取数据的最大区别就是改变了数据的来源。
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_68905.html