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();
}
}
})
上一篇: 青岛5月份可以看什么花?
下一篇: vue网络应用:天气查询