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. Codeforces Round #553 (Div. 2) C. Problem for Nazar 数学

    题意:从奇数列 1 3 5 7 9 ....  偶数列2 4 6 8 10...分别轮流取 1 2 4 ....2^n 个数构成新数列 求新数列的区间和 (就一次询问) 思路:首先单次区间和就是一个简 ...

  2. [Swift]扩展UIColor：实现十六进制颜色字符串与UIColor之间的相互转换

    对[UIColor]进行扩展 import UIKit extension UIColor { // Hex String -> UIColor convenience init(hexStri ...

  3. Java高级开发必会的50个性能优化细节

    在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1. 尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时 ...

  4. 如何完美回答面试官问的Mybatis初始化原理！！！

    前言 对于任何框架而言,在使用前都要进行一系列的初始化,MyBatis也不例外.本章将通过以下几点详细介绍MyBatis的初始化过程. MyBatis的初始化做了什么 MyBatis基于XML配置文件 ...

  5. Maven Optional & Exclusions 使用区别

    Optional和Exclusions都是用来排除jar包依赖使用的,两者在使用上却是相反. Optional定义后,该依赖只能在本项目中传递,不会传递到引用该项目的父项目中,父项目需要主动引用该依赖 ...

  6. 大数据项目相关技术栈（Hadoop周边技术）

    J2EE 框架Spring 开发框架 + SSH or SSM Lucene 索引和查询IKAnalyzer 分词Webmagic 爬虫 ETL工具:KettleSqoop 结构化数据库-hadoop ...

  7. postgresql-磁盘空间不足问题排查

    问题背景 加压测试过程中发现插入数据过程中报错:could not write to hash-join temporary file: 设备上没有空间.但是查看服务器还有很多空闲空间,是什么导致这样 ...

  8. rest framework 尝鲜

    安装 pip install djangorestframework 新建项目 python manage.py startapp idcs 添加模型(models.py) class Idcs(mo ...

  9. Java学习之Servlet篇

    <JAVA遇见HTML——Servlet篇> Servlet 生命周期:Servlet 加载--->实例化--->服务--->销毁. init():在Servlet的生命 ...

  10. 交换路由中期测验20181226（动态路由配置与重分发、NAT转换、ACL访问控制列表）

    测试拓扑: 接口配置信息 HostName 接口 IP地址 网关 Server 0 Fa0 172.16.15.1/24 172.16.15.254 Server 1 Fa0 100.2.15.200 ...