美文网首页vue
Vue引入当地实时天气数据

Vue引入当地实时天气数据

作者: Poppy11 | 来源:发表于2020-03-23 22:54 被阅读0次
    免费天气接口

    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'}">
    

    相关文章

      网友评论

        本文标题:Vue引入当地实时天气数据

        本文链接:https://www.haomeiwen.com/subject/eizgyhtx.html