vue获取当前时间并时时刷新

vue获取当前时间并时时刷新

页面显示

<div><span>{
    
    {
    
    nowDate}}</span><span class="houertime">{
    
    {
    
    hourDate}}</span></div>

图片上传失败！！！！，我是分开年月日和时分秒，给时分秒加样式
2022/11/24 18:30:20
data中定义变量和定时器

在created中放一个定时器，每秒读取当前时间一次，
在定时器之前先加载，否则会延迟一秒

data(){
    
    
	return {
    
    
		  nowDate: null,
	      hourDate: null,
	      nowtimer: ''
	}
},

created() {
    
    
	this.gettime()  // 如果不先调用一次的话，页面显示一秒后，时间才会显示
    this.nowtimer = setInterval(this.gettime, 1000);
  },
 methods: {
    
    
    gettime() {
    
    
    	this.nowDate = new Date().toLocaleString('zh', {
    
     year: 'numeric', month: 'numeric', day: 'numeric' })
        this.hourDate = new Date().toLocaleString('zh', {
    
     hour: 'numeric', minute: 'numeric', second: 'numeric' })
    }
  },
  

最后进行销毁

beforeDestroy () {
    
    
    if (this.nowDate && this.hourDate) {
    
    
      clearInterval(this.nowDate, this.hourDate) // 在Vue实例销毁前，清除定时器
    }
  }