结合vue展示百度天气接口天气预报
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 }展示：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-07-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
