首先我们在 methods 中进行书写时间的方法,在methods定义年月日时分秒等进行一个初步构造。

getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth()+1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    this.Samplingtime=_this.gettime;
    console.log(_this.gettime)  
    }

 然后在  Vue的周期函数中的mounted()里面进行设置每秒调用一次。

 mounted() {
     this.getCurrentTime();
    clearInterval(myTimeDisplay );
    let myTimeDisplay = setInterval(() => {
      this.getCurrentTime(); //每秒更新一次时间
    }, 1000);
  },

最终代码:

<template>
<div>{{Samplingtime}}</div>
</template>
export default {
  data() {
    return {
      //取样时间
      Samplingtime:'',
    };
  },
 mounted() {
     this.getCurrentTime();
    clearInterval(myTimeDisplay );
    let myTimeDisplay = setInterval(() => {
      this.getCurrentTime(); //每秒更新一次时间
    }, 1000);
  },
  

methods: {
    //时间 
    getCurrentTime() {
        //获取当前时间并打印
        var _this = this;
    let yy = new Date().getFullYear();
    let mm = new Date().getMonth()+1;
    let dd = new Date().getDate();
    let hh = new Date().getHours();
    let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
    let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
    _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
    this.Samplingtime=_this.gettime;
    console.log(_this.gettime)  
    }
}
}

获取文章流量推荐曝光度随便胡说八道两句

vue3.0带来了什么

1.性能的提升

  • 打包大小减少41%
  • 初次渲染快55%,更新渲染块133%
  • 内存减少54%
  • ........

2.源码的升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Sharking
  • ......

3.拥抱TypeScript

  • vue3.0更好的支持TypeScript

4.新的特性

Composition API(组合api)

。 setup配置

。ref与reactive

。watch与watchEffect

。 provide和inject

。 .......

新的内置组件

。 Fragment

。Teleport

。Suspense

其他改变

。新的生命周期钩子

。data选项应始终被声明为一个函数

。移除keyCode支持作为v-on的修饰符

Logo

前往低代码交流专区

更多推荐