Vue实现天⽓预报功能
本⽂为⼤家分享了Vue实现天⽓预报功能的具体代码，供⼤家参考，具体内容如下
1、功能描述
在搜索框中输⼊城市，下⽅出现今天及未来四天的天⽓情况。搜索框下⾯固定了⼏个城市，点击可以快速查询。
2、html代码
<div id="app">
<div id="srchbar">
<input type="text" v-model="city" @="srch(city)" id="ipt">
<a @click=srch(city) id="btn">search</a>
</div>
<nav>
<a href="#" @click="srch('北京')">北京</a>
<a href="#" @click="srch('上海')">上海</a>
<a href="#" @click="srch('⼴州')">⼴州</a>
<a href="#" @click="srch('深圳')">深圳</a>
</nav>
<div id="res">
<table>
<tr>
<th v-for="item in forecasts">{{pe}}</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: {
srch: function (c) {
var that = this;
<("uch/weather_mini?city=" + c).then(function (message) {
that.city = c;
that.forecasts = message.data.data.forecast;
})
}
}
})
结果⽰意
总结
主要练习了v-for, v-model, v-on表达式，以及使⽤axios通过接⼝请求数据。
⼩编之前学习过程中曾将收藏了⼀段关于天⽓预报功能的js关键代码，分享给⼤家，⼀起学习。
// 请求地址:uch/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;
<('uch/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();
}
}
})
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。