HTML：

 <!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>

 </head>

 <style>

     ul {

         background-color: #fff000;

         padding: 10px 40px;

     }

     #city {

         padding: 10px;

         width: 200px;

         height: 15px;

         border: 1px solid #00ff00;

     }

     #search {

         height: 37px;

         background-color: #000;

         color: #fff;

         border: 0;

         width: 100px;

         vertical-align: middle;

     }

     #search:hover {

         background-color: #00ff00;

         color: #ff6600;

     }

 </style>

 <body>

     <h3>默认显示天津天气</h3>

     <form action="" onsubmit="return false;">

         <input type="text" name="" id="city" placeholder="请输入城市···">

         <input type="submit" value="搜索" id="search">

     </form>

     <div id="weather">

         <p>时间：{{ weatherData.date }}</p>

         <p>提示：{{ weatherData.status }}</p>

         <p>错误：{{ weatherData.error }}</p>

         <div v-for="(item) in weatherData.results">

             <p>地区：{{ item.currentCity }}</p>

             <ul v-for="(item) in item.index">

                 <li>{{ item.des }}</li>

                 <li>{{ item.tipt }}</li>

                 <li>{{ item.title }}</li>

                 <li>{{ item.zs }}</li>

             </ul>

             <p>PM2.5:{{ item.pm25 }}</p>

             <ul v-for="(item) in item.weather_data">

                 <li>{{ item.date }}</li>

                 <li>

                     <img v-bind:src="item.dayPictureUrl" alt="">

                 </li>

                 <li>{{ item.temperature }}</li>

                 <li>{{ item.weather }}</li>

                 <li>{{ item.wind }}</li>

             </ul>

         </div>

     </div>

     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

     <script src="weather.js"></script>

 </body>

 </html>

JavaScript：

 // 点击搜索搜索城市天气

 $(search).click(function(){

     cityWeather($(city).val());

 })

 // vue展示

 var vmWeather = new Vue({

     el:"#weather",

     data:{

         weatherData:{}

     }

 })

 // 默认显示天津

 cityWeather("天津");

 // 天气接口

 function cityWeather(city) {

     // 清空对象

     vmWeather.weatherData = {};

     $.ajax({

         type: "POST",//默认是GET

         url: "http://api.map.baidu.com/telematics/v3/weather",

         dataType: "jsonp",

         data: {

             location: city, // 城市

             output: "json", // 格式

             ak: "ohA7QHfg0BBrpiY4kyuIAAsD" // 百度地图ak

         },

         success: function (data) {

             console.log(data);

             vmWeather.weatherData = data;

         }

     });

 }

展示：

结合vue展示百度天气接口天气预报的更多相关文章

  1. android 百度天气接口

    百度天气接口 之前有篇随笔是说中国气象的天气接口的,但那个接口不是很稳定,用一段时间过后就会获取不到数据了. 随笔地址:http://www.cnblogs.com/liangstudyhome/p/ ...

  2. PHP调用百度天气接口API

    //百度天气接口API $location = "北京"; //地区 $ak = "5slgyqGDENN7Sy7pw29IUvrZ"; //秘钥,需要申请,百 ...

  3. 百度天气接口api

    百度天气接口 以GET形式提交,返回JSON或XML URL:http://api.map.baidu.com/telematics/v3/weather?location={城市名}&out ...

  4. Android天气预报+百度天气接口

    首先 在准备编敲代码之前有几点准备工作 1首先须要调节Android的DNS地址. (这个我会在末尾提及) http://www.eoeandroid.com/forum.php? mod=viewt ...

  5. Vue调用百度接口做百度搜索

    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue来调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾 ...

  6. Android解析中国天气接口JSon数据，应用于天气查询！

    android解析Json数据是比较常见的一种操作.也是客户端和服务器进行数据交互的桥梁.下面就来看一看在android中解析JSon数据的方法吧. 首先要想获得Json数据,就必须访问相关的网络接口 ...

  7. php 调用天气接口

    前几天没事的时候,浏览博客看到了一篇免费天气接口的文章,然后调用了一下文章中提到的接口,自己琢磨了半天,把数据处理了一下,虽然现在用不到,但是说不定以后会用,所以打算记录一下,毕竟这也算是自己第一次在 ...

  8. c#代码 天气接口 一分钟搞懂你的博客为什么没人看 看完python这段爬虫代码，java流泪了c#沉默了 图片二进制转换与存入数据库相关 C#7.0--引用返回值和引用局部变量 JS直接调用C#后台方法（ajax调用） Linq To Json SqlServer 递归查询

    天气预报的程序.程序并不难. 看到这个需求第一个想法就是只要找到合适天气预报接口一切都是小意思,说干就干,立马跟学生沟通价格. ​ ​不过谈报价的过程中,差点没让我一口老血喷键盘上,话说我们程序猿的人 ...

  9. C# 解析百度天气数据,Rss解析百度新闻以及根据IP获取所在城市

    百度天气 接口地址:http://api.map.baidu.com/telematics/v3/weather?location=上海&output=json&ak=hXWAgbsC ...

随机推荐

  1. RunTime之类与对象

    我们知道,Objective-C是一门动态语言,它将很多静态语言在编译时期做的事放到了运行时来处理.用C++编写的程序通过编译器直接把函数地址硬编码进入可执行文件:而Objective-C无法通过编译 ...

  2. 在 Linux 上如何挂载 qcow2 磁盘镜像

    1.下载qemu-nbd工具 sudo apt-get install qemu-utils 或者 sudo yum install qemu-img 2.加载nbd模块,然后挂载 sudo modp ...

  3. Cordova - IOS浏览器里面数字被当做电话号码

    网页上有连续超过5个数字,ios浏览器就会当做手机号码,如果某行文字有颜色,那么这个连续的数字就没颜色,变黑色了. 解决方法:在html页面头部加入下面代码 <meta name="f ...

  4. AJAX从入门到放弃（一）

    AJAX可以用于创建快速动态的网页(无需重新加载整个网页的情况下,能够更新部分网页的技术) 即异步的Javascript和XML,通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新. A ...

  5. HTTP 协议支持的十种方法

    GET 获取资源,用来请求访问已被URI识别的资源. POST 传输实体主体. PUT 传输文件,(鉴于HTTP/1.1的PUT方法自身不带验证机制,任何人都可以上传文件,存在安全性问题,因此一般We ...

  6. elasticsearch学习之根据发布时间设置衰减函数

    衰减函数decay functionion 高斯衰减 GET _search { "_source": ["title","release_date& ...

  7. eclipse——JDK安装与环境变量配置步骤

    第一次接触eclipse的时候,让我自己安装jdk和配置环境变量,我是懵逼的,后来百度到找到了一个比较详细的引导,本人测试没问题,截图按步骤如下: JDK安装   步骤1: 步骤2: 配置环境变量 步 ...

  8. hystrix降级初步学习

    通过hystrix可以进行服务的限流.熔断.降级 配置 服务端Eureka server: port: 8761 # 指定该Eureka实例的端口 eureka: client: registerWi ...

  9. python编译生成的.pyc作用

    如果 Python 进程在机器上拥有写入权限,那么它将把程序的字节码保存为一个以 .pyc 为扩展名的文件( ".pyc" 就是编译过的 ".py" 源代码). ...

  10. Liferay7 BPM门户开发之21: 理解消息总线（Message Bus）体系

    Liferay Message Bus提供了松耦合的消息发送接收机制(生产和消费的设计模式),用于本地服务,不支持远程服务,支持集群. 主要用途: 两个或多个插件之间的通讯. 在事件中发送搜索索引,比 ...