vue计时器

在 Vue 中实现一个计时器,可以通过 setInterval 或 setTimeout 方法来实现,具体步骤如下:

  1. 在 data 中定义一个变量来保存当前时间,初值为 0,例如 timer:
    data() {
      return {
        timer: 0,
      };
    },
    

  2. 在 mounted 钩子函数中启动计时器:
    mounted() {
      setInterval(() => {
        this.timer++;
      }, 1000);
    },
    

  3. 在模板中,通过 Mustache 语法({ {}})将 timer 变量显示出来:
    <template>
      <div>
        <span>{
         
         { formatTime(timer) }}</span>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          timer: 0,
        };
      },
      mounted() {
        setInterval(() => {
          this.timer++;
        }, 1000);
      },
      methods: {
        formatTime(time) {
          // 将时间格式化为 hh:mm:ss 的形式
          let hour = Math.floor(time / 3600);
          let minute = Math.floor((time - hour * 3600) / 60);
          let second = Math.floor(time - hour * 3600 - minute * 60);
          return `${hour.toString().padStart(2, '0')}:${minute
            .toString()
            .padStart(2, '0')}:${second.toString().padStart(2, '0')}`;
        },
      },
    };
    </script>
    

猜你喜欢

转载自blog.csdn.net/qq_19820589/article/details/131015441