Vue+JavaScript获取当前时间，实现实时更新 --柚子真好吃

该文章在搭建完Vue-cli项目的基础上进行讲解。

一、获取当前时间

‘script’中的代码如下。

<script>
  export default{
    name:"showTime",
    data(){
      return{
        time : "1111-11-11 11:11:11"
      };
    },
    methods:{
      show(){
        var time = this.getTime();

      },
      getTime(){
        var date = new Date();					
        var year = date.getFullYear();			//获取当前年份
        var month = date.getMonth()+1;			//获取当前月份，从0开始所以要加1
        var day = date.getDate();				//获取当前日期
        var hour = date.getHours();				//获取当前小时
        var minute = date.getMinutes();			//获取当前分钟	
        var second = date.getSeconds();			//获取当前秒数
        console.log(year);
        console.log(month);
        console.log(day);
        console.log(hour);
        console.log(minute)
        console.log(second);
      },
    },
    created() {

    },
    mounted() {
      this.show();
    },
  }
</script>

下面是控制台输出的结果

下面是我电脑的当前时间

到此我们已经成功的获取到了当前的时间。

二、时间展示

因为我们的项目是在Vue的框架基础上，所以只需要定义好data即可，代码如下。

<template>
  <div>
    {{time}}
  </div>
</template>

<script>
  export default{
    name:"showTime",
    data(){
      return{
        time : "1111-11-11 11:11:11"
      };
    },
    methods:{
      show(){
        var time = this.getTime();

      },
      getTime(){
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        console.log(year);
        console.log(month);
        console.log(day);
        console.log(hour);
        console.log(minute)
        console.log(second);

        this.time = year+"-"+month+"-"+day+" "+hour+":"+minute+":"+second;
      },
    },
    created() {

    },
    mounted() {
      this.show();
    },
  }
</script>

效果如下。

注：这里面有个细节就是当我们获取的数组为个位数的时候，需要将数字前添‘0’，这样的话我们需要做一下判断，代码如下。

if(month < 10){
          time += "0"
        }
        time += month + "-";

        if(day < 10){
          time += "0"
        }
        time += day + " ";

        if(hour < 10){
          time += "0"
        }
        time += hour + ":";

        if(minute < 10){
          time += "0"
        }
        time += minute + ":";

        if(second < 10){
          time += "0"
        }
        time += second;

效果如下

三、实时更新

这里需要用到一个方法–循环

mounted() {
      this.show();
      setInterval(this.show,1000);
    },

	setInterval(this.show,1000);   //意思是每过1000毫秒执行一次show方法。

如此我们的时间实时更新功能就实现了。