| 本文实例为大家分享了Vue实现天气预报的具体代码，供大家参考，具体内容如下 效果图 
实现代码 <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>天知道</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/index.css" /> <style> [v-cloak] { display: none; } </style> </head> <body> <div class="wrap" id="app"> <div class="search_form"> <div class="logo"><img src="img/logo.png" alt="logo" /></div> <div class="form_group"> <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="searchWeather" /> <button class="input_sub" @click="searchWeather">搜 索</button> </div> <div class="hotkey"> <a href="javascript:;" @click="searchWeatherByCity('北京')">北京</a> <a href="javascript:;" @click="searchWeatherByCity('上海')">上海</a> <a href="javascript:;" @click="searchWeatherByCity('广州')">广州</a> <a href="javascript:;" @click="searchWeatherByCity('深圳')">深圳</a> </div> </div> <ul class="weather_list" v-cloak="block"> <li v-for="item in weatherList"> <div class="info_type"> <span class="iconfont">{{item.type}}</span> </div> <div class="info_temp"> <b>{{item.low}}</b> ~ <b>{{item.high}}</b> </div> <div class="info_date"><span>{{item.date}}</span></div> </li> </ul> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <!-- 自己的js --> <script src="./js/main.js"></script> </body></html>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(); } },})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
一文带你走进js数据类型与数据结构的世界
vue实现表单验证功能 |
