HTML：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>百度天气</title> 9 </head> 10 11 <style> 12 ul { 13 background-color: #fff000; 14 padding: 10px 40px; 15 } 16 17 #city { 18 padding: 10px; 19 width: 200px; 20 height: 15px; 21 border: 1px solid #00ff00; 22 } 23 24 #search { 25 height: 37px; 26 background-color: #000; 27 color: #fff; 28 border: 0; 29 width: 100px; 30 vertical-align: middle; 31 } 32 33 #search:hover { 34 background-color: #00ff00; 35 color: #ff6600; 36 } 37 </style> 38 39 <body> 40 <h3>默认显示天津天气</h3> 41 <form action="" onsubmit="return false;"> 42 <input type="text" name="" id="city" placeholder="请输入城市···"> 43 <input type="submit" value="搜索" id="search"> 44 </form> 45 46 <div id="weather"> 47 48 <p>时间：{{ weatherData.date }}</p> 49 50 <p>提示：{{ weatherData.status }}</p> 51 52 <p>错误：{{ weatherData.error }}</p> 53 54 <div v-for="(item) in weatherData.results"> 55 56 <p>地区：{{ item.currentCity }}</p> 57 58 <ul v-for="(item) in item.index"> 59 <li>{{ item.des }}</li> 60 <li>{{ item.tipt }}</li> 61 <li>{{ item.title }}</li> 62 <li>{{ item.zs }}</li> 63 </ul> 64 65 <p>PM2.5:{{ item.pm25 }}</p> 66 67 <ul v-for="(item) in item.weather_data"> 68 <li>{{ item.date }}</li> 69 <li> 70 <img v-bind:src="item.dayPictureUrl" alt=""> 71 </li> 72 <li>{{ item.temperature }}</li> 73 <li>{{ item.weather }}</li> 74 <li>{{ item.wind }}</li> 75 </ul> 76 77 </div> 78 79 </div> 80 81 <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> 82 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 83 <script src="weather.js"></script> 84 85 </body> 86 87 </html>
JavaScript：
1 // 点击搜索搜索城市天气 2 $(search).click(function(){ 3 4 cityWeather($(city).val()); 5 6 }) 7 8 // vue展示 9 var vmWeather = new Vue({ 10 el:"#weather", 11 data:{ 12 weatherData:{} 13 } 14 }) 15 16 // 默认显示天津 17 cityWeather("天津"); 18 19 // 天气接口 20 function cityWeather(city) { 21 22 // 清空对象 23 vmWeather.weatherData = {}; 24 25 $.ajax({ 26 27 type: "POST",//默认是GET 28 29 url: "http://api.map.baidu.com/telematics/v3/weather", 30 31 dataType: "jsonp", 32 33 data: { 34 35 location: city, // 城市 36 37 output: "json", // 格式 38 39 ak: "ohA7QHfg0BBrpiY4kyuIAAsD" // 百度地图ak 40 41 }, 42 43 success: function (data) { 44 45 console.log(data); 46 47 vmWeather.weatherData = data; 48 } 49 50 }); 51 52 }
展示：
留下你的足迹求推荐呦