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. Git使用01

    git 工作区:当前编辑的区域 缓存区:add 之后的区域 本地仓库:commit之后的区域 远程仓库:远程的区域 git init 初始化 git status 查看git的状态 git add 将 ...

  2. 在Java Web中使用Spark MLlib训练的模型

    PMML是一种通用的配置文件,只要遵循标准的配置文件,就可以在Spark中训练机器学习模型,然后再web接口端去使用.目前应用最广的就是基于Jpmml来加载模型在javaweb中应用,这样就可以实现跨 ...

  3. [Mac]macOS Mojave ：发现 Mac 的新功能。

    1.深色模式 换种颜色看 Mac “深色模式”为桌面和内建应用带来更生动的外观,可让您轻松专注于最重要的内容. 若要在浅色和深色外观之间切换,请打开“系统偏好设置”并点按“通用”. 2.叠放 整理桌面 ...

  4. 关于hermes与solr，es的定位与区别

    Hermes与开源的Solr.ElasticSearch的不同 谈到Hermes的索引技术,相信很多同学都会想到Solr.ElasticSearch.Solr.ElasticSearch在真可谓是大名 ...

  5. C++primer笔记之顺序容器

    最近又重新拾起C++primer,发现每一次看都会有不同的体验,但每一次看后因为不常用,忘记得很快,所以记笔记是很关键的一环,咋一看是浪费时间,实际上是节省了很多时间.下面就把这一节的内容做一个简单的 ...

  6. asp.net core的docker实践

    如果centos中没有安装和docker和.net core镜像,先安装docker和asp.net core 镜像 安装dockeryum -y install docker-io 启动 Docke ...

  7. Ocelot 使用

    官方文档:http://ocelot.readthedocs.io/en/latest/introduction/gettingstarted.html 新建两个Asp.net core API项目 ...

  8. Hadoop2源码分析－RPC探索实战

    1.概述 在<Hadoop2源码分析-RPC机制初识>博客中,我们对RPC机制有了初步的认识和了解,下面我们对Hadoop V2的RPC机制做进一步探索,在研究Hadoop V2的RPC机 ...

  9. byte数组转float 以及byte转其他类型时为什么要&0xff

    static final char[] HEX_CHARS = "0123456789abcdef".toCharArray(); //转换为十六进制 public static ...

  10. 在2018年如何优雅的开发一个typescript语言的npm包？

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 ...