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. Linux Ubuntu部署web环境及项目tomcat+jdk+mysql

    1,下载文件 在官网下载好 tomcat.jdk.mysql的linux压缩包 后缀名为.tar.gz 并通过xftp上传到服务器 或者直接通过linux命令 下在wget文件的下载地址 例如: wg ...

  2. Java中的Lock接口

    Synchronized & Lock synchronized 是Java语言中的关键字,由monitorenter,monitorexit两个指令实现.JVM会将monitorenter指 ...

  3. [CocoaPods]客户端加载第三方库

    请先阅读另一篇博文铺垫知识基础:[CocoaPods]终端方式集成第三方库 客户端的Github地址:CocoaPods-app 点击下载客户端: [CocoaPods客户端] 安装下载的文件.软件界 ...

  4. 通过shell快速配置J2EE运行环境

    虽然可以通过已经配置好的docker镜像来快速运行相关环境, 但是 现实往往就是这么残酷+有钱很任性的时候 就是给出了一个装好系统的电脑让配置环境,每次的配置环境变量真的很烦 纯体力活 就简单的写个脚 ...

  5. requsets模块的学习

    requests模块的学习 使用之前 pip install requests 发起get,post,请求获取响应 response = requests.get(url,headers) # 发起g ...

  6. xamarin.Android ImageView 图片圆角（自定义属性、扩展控件）

    新增 /values/Attrs.xml 文件 <?xml version="1.0" encoding="utf-8" ?> <resour ...

  7. 为什么我们喜欢用 sigmoid 这类 S 型非线性变换?

    本文整理自 @老师木 的一条图片新浪微博,从另一个角度给出为何采用 sigmoid 函数作非线性变换的解释. 为什么我们喜欢用 sigmoid 这类 S 型非线性变换?

  8. 移动端真机调试终极利器-BrowserSync（使用方法）

    1. 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于Mac OS,Windows和Li ...

  9. kubernetes入门之获取私有仓库镜像

    一般情况下,我们项目构建的镜像统一会推送至私有仓库,那么这里大家可以参考阿里云的私有仓库搭建教程.那么我们可以通过以下步骤拉取: 1.推送及拉取镜像 1.1. 登录阿里云Docker Registry ...

  10. Kafka项目实战－用户日志上报实时统计之分析与设计

    1.概述 本课程的视频教程地址:<Kafka实战项目之分析与设计>  本课程我通过一个用户实时上报日志案例作为基础,带着大家去分析Kafka这样一个项目的各个环节,从而对项目的整体设计做比 ...