vue_axios+vue随机获取笑话

效果展示：

代码演示

<!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


posted @ 2020-04-07 21:07  以己为镜  阅读(756)  评论(0)    收藏  举报