欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript Vue 天气查询

程序员文章站 2022-07-04 12:19:23
...

天气查询

接口:天气接口
请求地址:http://wthrcdn.etouch.cn/weather_mini
请求方法:get
请求参数:city(查询的城市名)
响应内容:天气信息

HTML

<div id="box">
		<h1>天气预报</h1>
		<div class="search">
			<input type="text" class="search_left" v-model="city" @keyup.enter="getWeather">
			<input type="button" value="搜索" class="search_right" @click="getWeather">
			<div class="recommendlist">
				<a href="javascript:;" @click="clickCity('北京')">北京</a>
				<a href="javascript:;" @click="clickCity('上海')">上海</a>
				<a href="javascript:;" @click="clickCity('广州')">广州</a>
				<a href="javascript:;" @click="clickCity('深圳')">深圳</a>
			</div>
		</div>
		<div class="show">
			<ul v-if="city!=''">
				<li v-for="item in weatherList">
					<p>{{city}}</p>
					<p>{{item.date}}</p>
					<p>{{item.high}}</p>
					<p>{{item.low}}</p>
					<p>{{item.fengxiang}}</p>
				</li> 
			</ul>
		</div>
	</div>

CSS

        * {
			margin: 0px;
			padding: 0px;
		}
		#box {
			width: 700px;
			margin: 100px auto;
		}
		h1 {
			text-align: center;
			font-size: 30px;
		}
		.search_left {
			width: 420px;
			height: 30px;
			margin: 20px 10px 10px 125px;
		}
		.search_right {
			width: 70px;
			height: 32px;
			text-align: center;
			font-size: 20px;
		}
		.recommendlist {
			margin-left: 125px;
		}
		.recommendlist a {
			margin-right: 10px;
			text-decoration: none;
			color: #7091AB;
		}
		.show li {
			list-style-type: none;
			width: 120px;
			margin-top: 20px;
			margin-right: 15px;
			border-right: 1px black solid;
			float: left;
			text-align: center;
		}

javascript

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