axios 回调函数中的 this 已经改变,无法访问到 data 中数据把 this 保存起来,回调函数中直接使用保存的 this 即可和本地应用的最大区别就是改变了数据来源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="获取笑话" @click="getJoke"> <P>{{ joke }}</P> </div> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { joke: "笑话" }, methods: { getJoke: function () { var that = this; axios.get("https://autumnfish.cn/api/joke") .then(function (response) { // console.log(response.data); that.joke = response.data; }, function (err) { console.log(err) }) } } }) </script> </body> </html>