vue 天气,
本文主要详细介绍了Vue的天气预报功能。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享Vue实现天气预报功能的具体代码，供大家参考。具体内容如下
1、功能描述
在搜索框中输入城市，今天和未来四天的天气情况会出现在下面。下面的搜索框里固定了几个城市，可以点击快速查询。
2、html代码
div id=应用程序
div id=srchbar
input type= text v-model= city @ keyup . enter= srch(city) id= ipt
a @ click=srch(city)id= BTN search/a
/div
航行
A href=# @click=srch (Beijing )北京/a
a href= # @ click= srch( Shanghai )上海/a
A href=# @click=srch(广州)广州/a
a href= # @ click= srch( Shenzhen )深圳/a
/导航
div id=res
桌子
tr
预测中的第v-for=项“{item.type}}/th
/tr
tr
td v-for=预测中的项目 {{item.low}}~{{item.high}}/td
/tr
tr
td v-for=预测中的项目 {{item.date}}/td
/tr
/表格
/div
/div
3、js代码
var app=新Vue({
埃尔： #app ，
数据：{
城市： ，
预测：[]
},
方法：{
srch:函数(c) {
var that=this
axios . get( http://wthrcdn . etouch . cn/weather _ mini？city= c)。然后(函数(消息){
that . city=c；
that . forecasts=message . data . data . forecast；
})
}
}
})
结果指示
总结
主要练了v-for， v-model，v-on表达式，用axios通过接口请求数据。
在之前的学习过程中，边肖收集了一个关于天气预报功能的js关键代码，分享给大家一起学习。
//请求地址：http://wthrcdn.etouch.cn/weather_mini
//请求方法：get，
//请求参数：城市(城市名)
//响应内容：天气信息，
//1.点击回车。
//2.查询数据
//3.渲染数据
var app=新Vue({
埃尔： #app ，
数据：{
城市： ，
天气列表：[]，
},
方法：{
serchWeather: function() {
//console.log(天气查询)；
//console.log(this.city)
//调用接口
//保存这个
var that=this
axios . get( http://wthrcdn . etouch . cn/weather _ mini？city= this.city)。然后(函数(响应){
控制台.日志(response.data.data.forecast)
that . weather list=response . data . data . forecast
}).catch(函数(err) {})
},
changeCity:功能(城市){
//1.改变城市
//2.查看天气
this.city=city
this . serchweather()；
}
}
})
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。