天气接口的处理-2

<template id="app">
     <div class="main">
         <div class="main-henfu">
              <img src="../assets/banner.png" />
        </div>
        <div class="main-header">
            <div>
                <img src="../assets/logo-2.png" />
            </div>
            <div id="date" v-html="info"></div>
            <div></div>
        </div>
     </div>
</template>
<script>
</script>
<script>

//时间的显示与处理
function Time(){
    //控件的ID为date
    var show=document.getElementById("date");
      var data = new Date();
      var year = data.getFullYear();
      var month = data.getMonth()+1;
      //判断月份小于10则前面加0
      month=month<10?"0"+month:month;
      var day = data.getDate();
      var hour = data.getHours();
      hour=hour<10?"0"+hour:hour;
      var minute = data.getMinutes();
      minute=minute<10?"0"+minute:minute;
      var second = data.getSeconds();
      second=second<10?"0"+second:second;

      var date = year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second;
      show.innerHTML = date;
    }
//每秒使用一次时间函数
setInterval(function(){Time()},1000);
//界面加载函数
window.οnlοad=function(){
    Time();
}
export default{
  data () {
    return {
      info: null
    }
  },
    mounted () {
    this.axios
      .get('https://devapi.heweather.net/v7/weather/now?location=101230101&key=ca64ba0fc92d475f888d7f3185677783')
      .then(response => (
          this.info = "当前体感温度为："+response.data.now.feelsLike+"℃\n"+"天气："+response.data.now.text+"天"+
          "风向："+response.data.now.windDir+"风力等级："+response.data.now.windScale+"风速："+response.data.now.windSpeed
      ))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
    },
//去白边
    beforeRouteEnter(to, from, next) {
      // 添加背景色 margin:0;padding:0是为了解决vue四周有白边的问题
      document.querySelector('body').setAttribute('style', 'margin:0;padding:0')
      next()
    },
    beforeRouteLeave(to, from, next) {
      // 去除背景色
      document.querySelector('body').setAttribute('style', '')
      next()
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .main{background-color: aliceblue;}
    .main-henfu img{ width: 100%; height: 75px;    }
    .main-header{width: 1200px; margin: 0 auto;}
    #time{height: 50px;}
</style>