<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本地获取数据的最大区别就是改变了数据的来源。