简易版天气预报（利用 html 和 js ） 2021-07-16

最新推荐文章于 2024-05-24 10:49:57 发布

糊涂汪

最新推荐文章于 2024-05-24 10:49:57 发布

阅读量1.7k

点赞数 8

文章标签： vue javascript js ajax

本文链接：https://blog.csdn.net/weixin_52048535/article/details/118786428

版权

简易版天气预报（利用 html 和 js ）

利用html，js 和 vue 完成天气预报

html 完成的页面代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			<div id="top">
				<input type="text" v-model="city" v-on:keyup.enter="seacherweather" id="inputtext" value="" />
				<button type="button" v-on:click="seacherweather">查询</button>
			</div>
			<div id="but">
				<ul>
					<li v-for="item in weatherlist">
						<div id="">
							{{item.date}}<br>
							{{item.type}}<br>
							{{item.low}}-{{item.high}}<br>
							{{item.fengli}}<br>
							{{item.fengxiang}}
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="./天知道.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

利用 js 和 vue 完成的逻辑代码：

var app = new Vue({
	el:"#app",
	data:{
		city:"",
		weatherlist:[],
	},
	methods:{
		seacherweather:function(){
			var that = this;
			axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city)
			.then(function(response){
				console.log(response.data.data.forecast);
				that.weatherlist = response.data.data.forecast;
			})
		}
	}
})

效果图片：
虽然页面不美观，但是还是能看出是天气预报的，不影响信息。
内容还有很多欠缺，还望大佬们指出不足之处，我必虚心接受！！！！

糊涂汪

关注

8
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
简易版天气预报（利用 html 和 js ） 2021-07-16

简易版天气预报（利用 html 和 js ）利用html，js 和 vue 完成天气预报html 完成的页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div id="top"> &l
复制链接

扫一扫