Vue引入当地实时天气数据

免费天气接口

https://www.tianqiapi.com/index/doc

进入过后，注册，免费使用

export default {
    data() {
      return {
        localweather: {},
        weatherImg:''
      }
    },

因为接口给返回的天气图片并没有给图片地址，于是我在官网查看了官网用的天气图片链接，然后拼接了一下，发现几个天气图片都可以适用。

methods: {
      getWeather: function () {
        var _this = this;
        this.$axios.get('https://tianqiapi.com/api?version=v6&appid=71549884&appsecret=XH6bWw5A').then(function (response) {
          _this.localweather = response.data
          _this.weatherImg = 'http://tq.daodaoim.com//tianqiapi/skin/pitaya/' + response.data.wea_img +'.png'
        }).catch(() => {
        })
      },
    },

 <img :src="weatherImg" v-bind:style="{width:'40px',height:'40px'}">