<body>
<div id="mask">
<button @click="getJoke">获取笑话</button>
<p> {{ joke }} </p>
</div>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var mask = new Vue({
el: "#mask",
data: {
joke: "好笑的笑话"
},
methods: {
getJoke: function() {
var that = this; // 因为在then方法函数里面的 this不是指向 vue了 所以给它设个全局变量
axios.get("https://autumnfish.cn/api/joke/list?num=1")
.then(function(response) {
// 把网络请求库里面的笑话渲染到 定义的joke里面 因为是一个数组 所以把它转为字符串
var arr = response.data.jokes;
console.log(arr.toString());
that.joke = arr.toString();
}, function(error) {
console.log(error);
})
}
}
})
</script>
</body>