• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue实现天气预报功能

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文为大家分享了Vue实现天气预报功能的具体代码,供大家参考,具体内容如下

1、功能描述

在搜索框中输入城市,下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市,点击可以快速查询。

2、html代码

 <div id="app">
        <div id="srchbar">
            <input type="text" v-model="city" @keyup.enter="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">{{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: {
            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();
  }
 }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
js Promise并发控制数量的方法发布时间:2022-02-05
下一篇:
Vue+Openlayer中使用select选择要素的实现代码发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap