Vue页面展示当前时间

程序媛怪怪

已于 2024-08-29 16:58:22 修改

阅读量242

点赞数 4

文章标签： vue.js javascript 前端

于 2024-08-29 10:13:47 首次发布

本文链接：https://blog.csdn.net/bamadi123/article/details/141671394

版权

很多时候我们页面上需要展示当前时间，整理下实现的代码，希望能帮助到有需要的朋友

话不多说直接上代码：

<span>{{ currentTime }}</span>

data() {
    return {
      currentTimer: new Date(), // 当前时间
      timer: null, // 当前时间-存储定时器
    }
  },
computed: {
    currentTime() {//计算属性返回格式化的时间字符串
      return (
        this.currentTimer.getFullYear() +
        "/" +
        this.padStart(this.currentTimer.getMonth() + 1) +
        "/" +
        this.padStart(this.currentTimer.getDate()) +
        " " + 
        this.padStart(this.currentTimer.getHours()) +
        ":" +
        this.padStart(this.currentTimer.getMinutes()) +
        ":" +
        this.padStart(this.currentTimer.getSeconds())
      );
    }
}
mounted(){
    // 创建组件时开始更新时间
    this.timer = setInterval(this.updateTime, 1000);
},
beforeDestroy() {
    // 组件销毁前清除定时器
    clearInterval(this.timer);
},
methods: {
    padStart(value) {
        return value.toString().padStart(2, "0");
    },
    updateTime() {
        this.currentTimer = new Date(); // 更新时间
     },
}

好啦，这样页面上就展示了当前时间，是不是很简单！！