JavaScript Vue 天气查询

天气查询

接口：天气接口
请求地址：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();
				}
			}
		})