Vue.js天气查询_vue免费获取天气组件-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_50969362/article/details/117195601

本文介绍了一个使用Vue.js构建的天气查询应用，通过HTML、CSS和JavaScript实现了界面布局和交互功能。应用中，输入框能响应键盘回车事件触发查询，并实时更新当前时间。同时，展示了如何从API获取并显示天气预报数据。CSS用于美化界面，包括背景色、边框和文字样式等。JavaScript部分处理了数据请求和时间显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

输入框内部无法跟着外部div设置的背景色而改变颜色

HTML

<div id="app">
			<div id="header">
				<h1>天气预报查询</h1>
				<p><input @keyup.enter="search()" type="text" v-model="city" id="city"
						placeholder="请输入要查询天气的城市" /><button type="button" @click="search()">查询</button></p>
				<p>当前时间：<input type="text" id="date"  readonly="readonly"/></p>	
			</div>

			<div id="nav">
				<div v-for="w in weatherlist">
					<h2>{{w.type}}</h2>
					<p>{{w.low}}~{{w.high}}</p>
					<p>{{w.fengxiang}}</p>
					<p>{{w.date}}</p>
				</div>
			</div>
		</div>

CSS

* {
				padding: 0;
				margin: 0;
			}

			#app {
				width: 800px;
				height: 600px;
				border: aqua 3px solid;
				margin: 50px auto;
				padding-top: 40px;
				background-color: aquamarine;

			}

			#header {
				text-align: center;
			}

			#nav>div {
				width: 180px;
				margin: 5px 9px;
				/* 边框线宽度为1px占用1px */
				border: pink 1px solid;
				display: inline-block;
				text-align: center;
			}

			button {
				padding: 3px;
				background-color: greenyellow;
				margin-left: 5px;
			}

			#city {
				padding: 3px 0;
			}

			h1 {
				text-align: center;
				font-size: 50px;
				color: brown;
			}

			h2 {
				text-align: center;
				color: #5d68ff;
			}
			#date {
				width: 200px;
				height: 30px;
				border: none;
				padding: 2px 10px;
                outline: none;/* 去除边框聚焦效果 */	
			}
			input {
				background-color: aquamarine;/* 输入框背景色 */
			}

JS

new Vue({
				el: "#app",
				data: {
					city: "",
					weatherlist: []
				},
				methods: {
					search: function() {
						var that = this;
						axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + this.city).then(function(resp) {
								console.log(resp.data.data.forecast);
								that.weatherlist = resp.data.data.forecast;
							})
							.catch(function(err) {
								alert("城市输入有误！")
							})
					}
				}
			})
			//显示时间
			function showTime() {
				var t = new Date()
				var year = t.getFullYear();
				var month = t.getMonth();
				var day = t.getDate();
				var week = t.getDay();
				var arr = new Array("星期一","星期二","星期三","星期四","星期五","星期六","星期日");
				var hour = t.getHours();
				var minute = t.getMinutes();
				var second = t.getSeconds();								
				var showTime = year+"/"+month+"/"+day+" "+arr[week]+" "+hour+((minute<10)?":0":":")+minute+((second<10)?":0":":")+second;
				document.getElementById("date").value=showTime;
			}
			setInterval("showTime()",1000);