赞
踩
利用html,js 和 vue 完成 天气预报
html 完成的页面代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div id="top"> <input type="text" v-model="city" v-on:keyup.enter="seacherweather" id="inputtext" value="" /> <button type="button" v-on:click="seacherweather">查询</button> </div> <div id="but"> <ul> <li v-for="item in weatherlist"> <div id=""> {{item.date}}<br> {{item.type}}<br> {{item.low}}-{{item.high}}<br> {{item.fengli}}<br> {{item.fengxiang}} </div> </li> </ul> </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js" type="text/javascript" charset="utf-8"></script> <script src="https://unpkg.com/axios/dist/axios.min.js" type="text/javascript" charset="utf-8"></script> <script src="./天知道.js" type="text/javascript" charset="utf-8"></script> </body> </html>
利用 js 和 vue 完成的逻辑代码:
var app = new Vue({ el:"#app", data:{ city:"", weatherlist:[], }, methods:{ seacherweather:function(){ 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; }) } } })
效果图片:
内容还有很多欠缺,还望大佬们指出不足之处,我必虚心接受!!!!
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。