vue计时器

简介: vue计时器

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

  1. 在 data 中定义一个变量来保存当前时间,初值为 0,例如 timer:
data() {
  return {
    timer: 0,
  };
},
  1. 在 mounted 钩子函数中启动计时器:
mounted() {
  setInterval(() => {
    this.timer++;
  }, 1000);
},
  1. 在模板中,通过 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>
相关文章
|
JavaScript 算法
【Vue面试题六】、为什么Vue中的 v-if 和 v-for 不建议一起用?
这篇文章解释了Vue中`v-if`和`v-for`不建议一起使用的原因,因为`v-for`具有更高的优先级,同时使用会导致性能浪费。文章建议使用`<template>`标签来包裹`v-if`和`v-for`,以优化性能,并通过计算属性提前过滤不需要显示的项。
【Vue面试题六】、为什么Vue中的 v-if 和 v-for 不建议一起用?
|
JavaScript 算法
【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
这篇文章深入探讨了Vue中`key`的原理及其作用,解释了`key`是为每个虚拟DOM节点提供的唯一标识符,作为`diff`算法的优化策略,有助于更快速准确地识别和重用DOM元素。文章通过实际代码示例展示了使用`key`与否在列表渲染时对DOM操作的影响,分析了`key`在不同场景下的性能表现,并提供了源码层面的分析,解释了Vue如何通过`key`来识别和更新虚拟DOM节点。
【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
|
域名解析 缓存 网络协议
浏览器输入 URL 回车后会经历哪些步骤?
本文首发于微信公众号“前端徐徐”,详细解析了从在浏览器中输入URL到页面完全呈现的全过程,涵盖检查缓存、URL解析、DNS解析、TCP连接、HTTP请求、服务器响应、浏览器处理响应、页面解析与渲染、关闭TCP连接等关键步骤。通过这些步骤,帮助读者深入了解互联网的工作原理,提升网站性能和用户体验。
304 0
|
前端开发 JavaScript
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
1289 0
|
监控 网络协议 网络安全
SMTP操作使用详解并通过python进行smtp邮件发送示例
SMTP操作使用详解并通过python进行smtp邮件发送示例
581 3
|
Java
性能分析之JMeter 脚本执行失败导致的问题
【8月更文挑战第20天】性能分析之JMeter 脚本执行失败导致的问题
344 0
|
前端开发 API Android开发
Flutter-自定义尺子
Flutter-自定义尺子
275 0
|
Devops 测试技术 持续交付
典型案例 | 基于全数字实时仿真的嵌入式DevOps解决方案
浙江省经信厅与省密码管理局联合开展的2023年信创典型案例评选,选出了36个应用示范案例和24个解决方案。其中,一个突出的典型解决方案是基于全数字实时仿真的嵌入式DevOps,它使用SkyEye软件提供自动化测试环境,提升研发效率。该方案适用于国防、工业等多个领域,通过高性能实时仿真、云部署和集成多种工具,实现嵌入式软件开发与硬件设计并行,降低成本,缩短研发周期。作为国内首创,它推动了信创在关键领域的应用。
263 0
【MATLAB第38期】 MATLAB SSA-XGBOOST实现多分类预测,麻雀算法SSA优化XGBOOST模型超参数(多输入单输出数据)
【MATLAB第38期】 MATLAB SSA-XGBOOST实现多分类预测,麻雀算法SSA优化XGBOOST模型超参数(多输入单输出数据)
|
前端开发 算法 搜索推荐
【面试题】20个常见的前端算法题,你全都会吗?
【面试题】20个常见的前端算法题,你全都会吗?
988 0