Vue入门实战之天气预报 Vue入门实战之天气预报

【Vue入门实战之天气预报】本文实例为大家分享了Vue实现天气预报的具体代码，供大家参考，具体内容如下
效果图

文章图片

实现代码

天知道 - 锐客网[v-cloak] {display: none; }
文章图片
北京上海广州深圳
{{item.type}}{{item.low}}~{{item.high}}{{item.date}}

index.css

body{font-family:'Microsoft YaHei'; }.wrap{position: fixed; left:0; top:0; width:100%; height:100%; /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); *//* background:#8fd5f4; *//* background: linear-gradient(#6bc6ee, #fff); */background:#fff; }.search_form{width:640px; margin:100px auto 0; }.logo img{display:block; margin:0 auto; }.form_group{width:640px; height:40px; margin-top:45px; }.input_txt{width:538px; height:38px; padding:0px; float:left; border:1px solid #41a1cb; outline:none; text-indent:10px; }.input_sub{width:100px; height:40px; border:0px; float: left; background-color: #41a1cb; color:#fff; font-size:16px; outline:none; cursor: pointer; position: relative; }.input_sub.loading::before{content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/loading.gif'); }.hotkey{margin:3px 0 0 2px; }.hotkey a{font-size:14px; color:#666; padding-right:15px; }.weather_list{height:200px; text-align:center; margin-top:50px; font-size:0px; }.weather_list li{display:inline-block; width:140px; height:200px; padding:0 10px; overflow: hidden; position: relative; background:url('../img/line.png') right center no-repeat; background-size: 1px 130px; }.weather_list li:last-child{background:none; }.info_date{width:100%; height:40px; line-height:40px; color:#999; font-size:14px; left:0px; bottom:0px; margin-top: 15px; }.info_date b{float: left; margin-left:15px; }.info_type span{color:#fda252; font-size:30px; line-height:80px; }.info_temp{font-size:14px; color:#fda252; }.info_temp b{font-size:13px; }.tem .iconfont {font-size: 50px; }

reset.css

body,ul,h1,h2,h3,h4,h5,h6{margin: 0; padding: 0; }h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal; }a{text-decoration:none; }ul{list-style:none; }img{border:0px; }/* 清除浮动，解决margin-top塌陷 */.clearfix:before,.clearfix:after{content:''; display:table; }.clearfix:after{clear:both; }.clearfix{zoom:1; }.fl{float:left; }.fr{float:right; }

main.js

/*请求地址:http://wthrcdn.etouch.cn/weather_mini请求方法:get请求参数:city(城市名)响应内容:天气信息1. 点击回车2. 查询数据3. 渲染数据*/var app = new Vue({el: "#app",data: {city: '',weatherList: []},methods: {searchWeather() {if (this.city == '') {alert("请输入城市！"); } else {var that = this; axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + that.city).then(function (response) {if (response.data.status == 1002) {alert("您输入的城市有误！请重新输入！"); that.city = ''; } else {that.weatherList = response.data.data.forecast; console.log(response.data); }}).catch(function (error) {console.log(error); })}},searchWeatherByCity(city) {this.city = city; this.searchWeather(); }},})

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