2021 vue接入天气情况api

雨点打透心脏的1/2处 2023-01-15 01:13 127阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70]

<template>
        <div>
            <h2>天气:{ { weather}}</h2>
            <h3>城市：{ { city}}</h3>
            <h4>温度：{ { tem}}</h4>
            <h5>风向：{ { winddir}}</h5>
        </div>
    </template>
    
    <script>
    import axios from 'axios'
    export default { 
      data() { 
        return { 
            city:null,
            weather :null,
            tem:null,
            winddir: null
        }
      },
      async beforeMount () { 
      //key去到https://dev.qweather.com/docs/api/weather/weather-now/申请
        let key = '你的key';
        let httpurl = `https://free-api.heweather.net/s6/weather/now?location=${ this.$route.params.city}&key=${ key}`;
        let res = await axios.get(httpurl)
        this.city = res.data.HeWeather6[0].basic.location;
        this.weather =res.data.HeWeather6[0].now.cond_txt;
        this.tem= res.data.HeWeather6[0].now.tmp;
        this.winddir =res.data.HeWeather6[0].now.wind_dir;
        console.log(res)
      }
    }
    </script>

vue循环动态跳转：  
![在这里插入图片描述][20210512111603589.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDEyNDU3Nw_size_16_color_FFFFFF_t_70]: /images/20221022/2c7b959c6ba54b52ad67dbfed28cc1d2.png
[20210512111603589.png]: /images/20221022/277f9c0abbf34c8c8fe820a00c124ba7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，127人围观）

还没有评论，来说两句吧...

相关阅读

相关 GitLab API 接入指南

文档官方文档：[https://docs.gitlab.com/ee/api/][https_docs.gitlab.com_ee_api] 认证方式官方文档

怼烎@/ 2023年10月05日 12:27/ 0 赞/ 15 阅读

相关制作天气接口API服务器【1.天气模块】

内容如下：制作天气接口API服务器: - 天气模块: - 后台逻辑: - 路由设置: 天气模块本文分别使用正则表达式和lxml+

桃扇骨/ 2023年06月09日 10:22/ 0 赞/ 13 阅读

相关 2021 vue接入天气情况api

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

雨点打透心脏的1/2处/ 2023年01月15日 01:13/ 0 赞/ 128 阅读

相关微信公众号接入百度天气API接口

接口功能介绍基础服务 http://api.map.baidu.com/weather/v1/?district\_id=222405&data\_type=all&

た入场券/ 2022年12月27日 07:29/ 0 赞/ 137 阅读

相关 vue天气预报

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年12月07日 15:09/ 0 赞/ 256 阅读

相关中国天气网实时天气api自定义ui

![请输入图片描述][img20210223102612.png] 需求：展示当前地区的天气和温度 `api`采用中国天气网的Api接口，天气网只提供了自定义的插件，没

柔光的暖阳◎/ 2022年11月14日 12:00/ 0 赞/ 216 阅读

相关一个免费的天气api

[https://www.tianqiapi.com/index/doc?version=day][https_www.tianqiapi.com_index_doc_vers

朱雀/ 2022年10月11日 06:17/ 0 赞/ 174 阅读

相关 Python使用免费天气API,获取全球任意地区的天气情况

需求背景: 公司是做外贸服装的,在亚马逊平台上有多个地区店铺运营,运营人员需要参考地区的天气情况,上新的服装.所以需要能够获取全球任意地区的天气情况.还需要预测未来10-15

清疚/ 2022年05月30日 07:37/ 0 赞/ 441 阅读

相关 WebService实现获取天气情况

1. WebServices简介 1.1什么是WebServices WebServices是应用程序组件 WebServices使用开放协议进行通

痛定思痛。/ 2022年04月06日 03:47/ 0 赞/ 373 阅读

相关免费机场天气api

使用的是航空气象网提供的接口 http://aviation.nmc.cn/ http://aviation.nmc.cn/f/airportinfo/auto

布满荆棘的人生/ 2021年07月17日 00:18/ 0 赞/ 753 阅读