vue实时显示当前时间和天气

左手的ㄟ右手 2021-08-19 19:36 1583阅读 0赞

推荐更简单的方式（使用dayjs）：[https://blog.csdn.net/qq\_40323256/article/details/110930383][https_blog.csdn.net_qq_40323256_article_details_110930383]

# 一、时间 #

### 代码实现：  ###

export default{
        data(){
          return{
            date:new Date()
          }
        },
        methods:{
          dateFormat(time) {
              var date=new Date(time);
              var year=date.getFullYear();
              /* 在日期格式中，月份是从0开始的，因此要加0
              * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
              * */
              var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
              var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
              var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
              var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
              var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
              // 拼接
              return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
          }
        },
        mounted() {
              //显示当前日期时间
              let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
              this.timer = setInterval(() => {
               _this.date = new Date(); // 修改数据date
               }, 1000)
           },
          beforeDestroy() {
           if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
          }
    }

### 使用：  ###

<div>{
       {dateFormat(date)}}</div>

### 效果图： ###

![2019110201284986.png][]

# 二、天气 #

mounted() {
      this.getWeather();
      this.timer = setInterval(() => {
      	this.getWeather();
      }, 1000 * 60 * 60)		
    },
    methods: {
      getWeather() { // 第三方天气api接口
        axios.get('https://www.tianqiapi.com/api/', {
          params: {
            appid: '26148275',
            appsecret: '2id6H48Y',
            version: 'v6'
          }
        }).then(res => {
          if (res.data) {
            if (res.data.wea_img == 'xue') {
              this.imgSrc = require('../assets/img/brand/xue.png');
            } else if (res.data.wea_img == 'yin') {
              this.imgSrc = require('../assets/img/brand/yin.png');
            } else if (res.data.wea_img == 'yu' || res.data.wea_img == 'bingbao') {
              this.imgSrc = require('../assets/img/brand/yu.png');
            } else if (res.data.wea_img == 'yun') {
              this.imgSrc = require('../assets/img/brand/yun.png');
            } else if (res.data.wea_img == 'wu') {
              this.imgSrc = require('../assets/img/brand/wu.png');
            } else if (res.data.wea_img == 'shachen') {
              this.imgSrc = require('../assets/img/brand/shachen.png');
            } else if (res.data.wea_img == 'lei') {
              this.imgSrc = require('../assets/img/brand/lei.png');
            } else {
              this.imgSrc = require('../assets/img/brand/qing.png');
            }
            this.weatcherData = res.data;
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }

[https_blog.csdn.net_qq_40323256_article_details_110930383]: https://blog.csdn.net/qq_40323256/article/details/110930383
[2019110201284986.png]: /images/20210725/b0b4fd9f027548ce8c177a3b5c6684bb.png