vue网络项目——天知道

最新推荐文章于 2023-06-22 23:30:25 发布

月上小楼

最新推荐文章于 2023-06-22 23:30:25 发布

阅读量1k

点赞数 3

分类专栏：前端文章标签： vue css html flex css3

本文链接：https://blog.csdn.net/wcy8733996wcy/article/details/113357363

版权

前端专栏收录该内容

9 篇文章 2 订阅

订阅专栏

本文介绍了一个使用Vue.js和Axios构建的简易天气查询应用。用户可以输入城市名称查询未来五天的天气，点击预设城市也会自动更新天气信息。应用界面简洁，包括搜索框、按钮和天气预报列表，展示了日期、天气状况和温度范围。通过响应式布局和Vue的数据绑定实现了交互功能。

摘要由CSDN通过智能技术生成

B站小项目（天知道），记录一下。

一、实现效果

输入要查询的城市，回车，返回该城市近五天的天气情况
点击输入框下面的城市，输入框内容自动变成刚才点击的城市，并返回该城市近五天的天气情况

二、运行界面

回车查询
点击查询

三、代码

html+css：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			h1{
				margin-top: 50px;
				margin-bottom: 30px;
				text-align:center;
				font-family: "隶书";
				font-size: 30px;
				color: DeepSkyBlue;
			}
			
			.search{
				width: 500px;
				/*注意：这里的高度改变，它的子元素是行内元素，按说高度按内容撑开，子元素的高度不会改变，
				 * 但是由于当前元素是弹性容器，弹性容器align-items属性默认值是伸展开，所以子元素的
				 * 高度会随当前元素的高度变化而变化。要想子元素高度不变，就要设置align-items的属性
				 * 值不是stretch*/
				height: 28px; 
				margin: 0 auto;
				border:1px solid deepskyblue;
				display: flex;
				/*align-items:flex-start;*/
			}
			input::-webkit-input-placeholder {
				color: #808080;
			}
			.content{
				flex: 10;
				border: none;
				padding: 3px;
			}
			.btn{
				flex: 1;
				border: none;
				background-color: deepskyblue;
			}
			.city{
				margin-left: 450px;
				padding-top: 5px;
				font-size: 10px;
				color: #808080;
			}
			a{
				margin-right: 10px;
			}
			ul{
				display: flex;
				width: 800px;
				margin: 30px auto;
			}
			li{
				flex: 2;
			}
			li:not(:last-child){
				/*background:linear-gradient(white,#808080,white);*/
				border-right: 1px solid gainsboro;
			}
			.weather{
				display: block;
				margin-bottom: 10px;
				text-align: center;
				color: darkorange;
			}
			.temperature{
				display: block;
				margin-bottom: 14px;
				text-align: center;
				color: darkorange;
				font-size: 12px;
			}
			.date{
				display: block;
				margin-bottom: 14px;
				text-align: center;
				color: #808080;
				font-size: 12px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1 class="title">天知道</h1>
			<div class="search">
				<input v-model="city" @keyup.enter="searchWeather" type="text" class="content" placeholder="请输入查阅的天气" />
				<input type="button" value="搜索" class="btn"/>
			</div>
			<div class="city">
				<a class="bj" @click="changeCity('北京')">北京</a>
				<a class="sh" @click="changeCity('上海')">上海</a>
				<a class="gz" @click="changeCity('广州')">广州</a>
				<a class="sz" @click="changeCity('深圳')">深圳</a>
			</div>
			<ul class="info">
				<li v-for="(item,index) in weatherList">
					<div class="wea"><span class="weather">{{item.type}}</span></div>
					<div class="tem"><span class="temperature">{{item.low}}~{{item.high}}</span></div>
					<div class="dat"><span class="date">{{item.date}}</span></div>
				</li>
				
			</ul>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		
		
		<script src="./weather.js"></script>
	</body>
</html>

js:

var item=new Vue({
	el:"#app",
	data:{
		city:"",
		weatherList:[]
	},
	methods:{
		searchWeather: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;
			})
			.catch(function(err){})
		},
		changeCity:function(nowCity){
			this.city=nowCity;
			this.searchWeather();
		}
	}
})

月上小楼

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue网络项目——天知道

B站小项目（天知道），记录一下。一、实现效果1.输入要查询的城市，回车，返回该城市近五天的天气情况2.点击输入框下面的城市，输入框内容自动变成刚才点击的城市，并返回该城市近五天的天气情况二、运行界面三、代码html+css<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> *{
复制链接

扫一扫

专栏目录