本篇内容主要讲解“Vue怎么实现天气预报功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue怎么实现天气预报功能”吧!
在搜索框中输入城市,下方出现今天及未来四天的天气情况。搜索框下面固定了几个城市,点击可以快速查询。
<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>
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怎么实现天气预报功能”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。