vue获取当地日期和天气数据

末蓝、 2023-06-20 04:57 14阅读 0赞

效果如下，需要获取到当地实时日期和天气数据

![20191207175650973.png][]

调用天气API接口，官网地址：[https://www.tianqiapi.com/?action=v1][https_www.tianqiapi.com_action_v1]

//html
    
        <a class="weeks">{
       {week}}</a>
        <a class="weather">{
       {weather}}</a>
        <a class="tem">{
       {tem2}}{
       {tem1}}</a>
    
    
    
    //js
     getWeather() {
          this.$axios
            .get(
              "https://www.tianqiapi.com/api/?version=v1&cityid=101280601"
            )
            .then(res => {
             // let datas = res.data.data[0];//下标为0即表示当天天气数据
              console.log(res.data);        
            })
            .catch(err => {
              console.log(err);
            });
        },

返回数据如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

其中version  ,  appid和appsecret为必填参数，上面的cityid只做参考，详情请查看接口文档

[20191207175650973.png]: https://img-blog.csdnimg.cn/20191207175650973.png
[https_www.tianqiapi.com_action_v1]: https://www.tianqiapi.com/?action=v1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191207175945556.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191209093551949.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70