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. 关于调试WCF时引发的异常XmlException: Name cannot begin with the '<' character, hexadecimal value 0x3C” on Client Side

    问题描述:在使用VS2015调试WCF时,偶遇抛出异常名称不能以“<”字符(十六进制0x3c)开头,平时运行时(不调试)没有问题的. 解决方法:检查后发现为了检查异常的位置,勾选了引发通用语言运 ...

  2. MVC 5使用TempData Object跨视图传递数据

    经过一系列显示数据的练习:<MVC 5使用ViewData(对象)显示数据>http://www.cnblogs.com/insus/p/3377178.html<MVC 5使用Vi ...

  3. Android开发工程师文集-1 小时学会Widget小组件开发

    前言 大家好,给大家带来Android开发工程师文集-1 小时学会Widget小组件开发的概述,希望你们喜欢 学会用Widget (小组件) Widget小组件很方便,很快捷,可以个性化,自己定制,相 ...

  4. jQuery应用实例2：表格隔行换色

    这里是用JS实现的:http://www.cnblogs.com/xuyiqing/p/8376312.html 接下来利用上一篇提到的选择器利用jQuery实现: 发现原来多行代码这里只需要两行: ...

  5. xtrabackup备份mysql-3 差异备份

    差异备份的特点是 基准点  指向第一次全备

  6. Python 基础：分分钟入门

    Python和Pythonic Python是一门计算机语言(这不是废话么),简单易学,上手容易,深入有一定困难.为了逼格,还是给你们堆一些名词吧:动态语言.解释型.网络爬虫.数据处理.机器学习.We ...

  7. MySQL slow_log日志表出现非法字段值

    背景 从mysql.slow_log 获取慢查询日志很慢,该表是csv表,没有索引. 想添加索引来加速访问,而csv引擎不能添加索引(csv引擎存储是以逗号分割的文本来存储的),只能改存储引擎来添加索 ...

  8. python中不同文件中函数和类的调用

    最近在学习Python的时候,遇到了一个不同文件中类无法调用的问题,搜了很多,发现很多人针对 这个问题都说的相当含糊,让我费了好大劲才把这个东东搞明白.记录一下,权且温习. 调用分两种,一种是同种文件 ...

  9. Tools - OpenSSL

    OpenSSL http://www.openssl.org/ OpenSSL is an open source project that provides a robust, commercial ...

  10. [EXP]Microsoft Windows MSHTML Engine - "Edit" Remote Code Execution

    # Exploit Title: Microsoft Windows (CVE-2019-0541) MSHTML Engine "Edit" Remote Code Execut ...