效果展示:
代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue_axios显示随机的笑话</title>
<!-- 点击按钮随机获取笑话 -->
</head>
<body>
<div id="app">
<input type="button" value="点击获取笑话" @click="getjokes()"/>
<p>{{joke}}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script>
// 接口:随机获取一条笑话,
// 请求地址:https://autumnfish.cn/api/joke
// 请求方法:get,
// 请求参数:无,
// 响应内容:随机笑话
var app = new Vue({
el: "#app",
data: {
joke:'搞笑的笑话',
},
methods:{
getjokes: function() {
var that=this;
axios.get("https://autumnfish.cn/api/joke").then(function(response) {
that.joke=response.data
// console.log(response.data)
}, function(err) {
console.log(err)
})
}
}
})
</script>
</body>
</html>
为什么要赋值给this