欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue实现天气预报功能

程序员文章站 2022-03-25 14:50:59
本文为大家分享了vue实现天气预报功能的具体代码,供大家参考,具体内容如下1、功能描述在搜索框中输入城市,下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市,点击可以快速查询。2、html代码...

本文为大家分享了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;
                })
            }

        }
})

结果示意

Vue实现天气预报功能

总结

主要练习了v-for, v-model, v-on表达式,以及使用axios通过接口请求数据。

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

相关标签: vue 天气预报