Vue实现天气预报功能
短信预约 -IT技能 免费直播动态提醒
本文为大家分享了Vue实现天气预报功能的具体代码，供大家参考，具体内容如下
1、功能描述
在搜索框中输入城市，下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市，点击可以快速查询。
2、html代码
<div id="app">
<div id="class="lazy" data-srchbar">
<input type="text" v-model="city" @keyup.enter="class="lazy" data-srch(city)" id="ipt">
<a @click=class="lazy" data-srch(city) id="btn">search</a>
</div>
<nav>
<a href="#" @click="class="lazy" data-srch('北京')">北京</a>
<a href="#" @click="class="lazy" data-srch('上海')">上海</a>
<a href="#" @click="class="lazy" data-srch('广州')">广州</a>
<a href="#" @click="class="lazy" data-srch('深圳')">深圳</a>
</nav>
<div id="res">
<table>
<tr>
<th v-for="item in forecasts">{{item.type}}</th>
</tr>
<tr>
<td v-for="item in forecasts">{{item.low}}~{{item.high}}</td>
</tr>
<tr>
<td v-for="item in forecasts">{{item.date}}</td>
</tr>
</table>
</div>
</div>3、js代码
var app = new Vue({
el: "#app",
data: {
city: "",
forecasts: []
},
methods: {
class="lazy" data-srch: function (c) {
var that = this;
axios.get("http://wthrcdn.etouch.cn/weather_mini?city=" + c).then(function (message) {
that.city = c;
that.forecasts = message.data.data.forecast;
})
}
}
})结果示意
总结
主要练习了v-for, v-model, v-on表达式，以及使用axios通过接口请求数据。
小编之前学习过程中曾将收藏了一段关于天气预报功能的js关键代码，分享给大家，一起学习。
// 请求地址:http://wthrcdn.etouch.cn/weather_mini
// 请求方法:get,
// 请求参数:city(城市名)
// 响应内容:天气信息,
// 1.点击回车
// 2.查询数据
// 3.渲染数据
var app = new Vue({
el: '#app',
data: {
city: '',
weatherList: [],
},
methods: {
serchWeather: function() {
// console.log('天气查询');
// console.log(this.city)
// 调用接口
//保存this
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(city) {
//1.改城市
//2.查天气
this.city=city;
this.serchWeather();
}
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
