vue获取今日天气数据 (免费接口)

对接的天气API的免费接口, 每日可请求500次

<template>
  <div style="margin-top: 30px;">
        <div> {{ dateAndWeek }} </div>
        <div>{{ wea }}</div>
        <div>{{ tem }} ℃</div>
  </div>
</template>

<script>
  export default {
    name: 'willDel',
    components: {},
    props: {},
    computed: {},
    filters: {},
    watch: {},
    data () {
      return {
        wea: '',
        tem: '',
        dateAndWeek: '',
      }
    },
    methods: {
      // 参考：http://www.tianqiapi.com/index/doc?version=day
      getWeaAndTem() {
        this.$axios({
          methods: 'get',
          url: 'https://tianqiapi.com/free/day',
          headers: {},
          params: {
            appid: '43656176', // 账号ID
            appsecret: 'I42og6Lm', // 账号密钥
            cityid: '101210113', // 城市编号,不要带CN, 以下参数3选1，当前以西湖区举例
            city: null, // 城市名称,不要带市和区
            ip: null, // IP地址
            callback: 0, // jsonp方式
          },
        })
          .then((res) => {
            const date = res.data.date;
            const week = res.data.week;
            this.dateAndWeek = date + week;
            this.wea = res.data.wea;
            this.tem = res.data.tem;
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    created () {
      this.getWeaAndTem();
    },
    mounted () {
    },
  }
</script>

<style lang="scss" scoped>

</style>