脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue计时器

Vue计时器的用法详解

 更新时间：2021年06月25日 13:03:35   作者：佛佛ง  
这篇文章主要为大家详细介绍了Vue计时器的用法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现计时器的具体代码，供大家参考，具体内容如下

功能简介：

1、初始值为0，点击【加】按钮，数字自+1；连续点击【加】，不影响数字+1

2、点击【停】按钮，停止+1

源码：

<!DOCTYPE html>
<html add="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue包 -->
  <script src="./lib/vue-2.4.0.js"></script>
</head>
 
<body>
  <!-- 2. 创建一个要控制的区域 -->
  <div id="app">
    <input type="button" value="加" @click="add">
    <input type="button" value="停" @click="stop">
    <h4>{{ count }}</h4>
  </div>
 
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 0,
        intervalId: null
      },
      methods: {
        add() {
          // 计时器正在进行中，退出函数
          if (this.intervalId != null) { 
            return 
          };
          // 计时器为空，操作
          this.intervalId = setInterval(() => {
            this.count += 1
          }, 400)
        },
        // 停止定时器
        stop() { 
          clearInterval(this.intervalId)//清除计时器
          this.intervalId = null;//设置为null 
        }
      }
    })
  </script>
</body>
 
</html>

之前小编收藏了一个开始计时的组件，这个组件可直接引入到项目中使用，谢谢原作者分享。

 <template>
    <div class="timer">
    <div ref="startTimer"></div>
    </div>
    </template>
    <script>
    export default {
    name: 'Timer',
    data () {
    return {
    timer: "",
    content: "",
    hour: 0,
    minutes: 0,
    seconds: 0
    }
    },
    created () {
    this.timer = setInterval(this.startTimer, 1000);
    },
    destroyed () {
    clearInterval(this.timer);
    },
    
    methods: {
    startTimer () {
    this.seconds += 1;
    if (this.seconds >= 60) {
    this.seconds = 0;
    this.minute = this.minute + 1;
    }
    
    if (this.minute >= 60) {
    this.minute = 0;
    this.hour = this.hour + 1;
    }
    this.$refs.startTimer.innerHTML = (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + (this.seconds < 10 ? '0' + this.seconds : this.seconds);
    }
    }
    }
    </script>
    <style>
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue实现侧边栏导航效果

    vue实现侧边栏导航效果

    这篇文章主要为大家详细介绍了vue实现侧边栏导航效果，右侧显示对应内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • vue+mock.js实现前后端分离

    vue+mock.js实现前后端分离

    这篇文章主要为大家详细介绍了vue+mock.js实现前后端分离，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue.js 使用v-if v-else发现没有执行解决办法

    vue.js 使用v-if v-else发现没有执行解决办法

    这篇文章主要介绍了vue.js 使用v-if v-else发现没有执行解决办法的相关资料,需要的朋友可以参考下
    2017-05-05
  • Django+vue跨域问题解决的详细步骤

    Django+vue跨域问题解决的详细步骤

    这篇文章主要介绍了Django+vue跨域问题解决的详细步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Vue解析剪切板图片并实现发送功能

    Vue解析剪切板图片并实现发送功能

    这篇文章主要介绍了Vue解析剪切板图片并实现发送功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • 用vue实现注册页效果 vue实现短信验证码登录

    用vue实现注册页效果 vue实现短信验证码登录

    这篇文章主要为大家详细介绍了用vue实现注册页，短信验证码登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    vue vantUI tab切换时 list组件不触发load事件的问题及解决方法

    这篇文章主要介绍了vue vantUI tab切换时 list组件不触发load事件的解决办法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-02-02
  • Vue中的ref作用详解(实现DOM的联动操作)

    Vue中的ref作用详解(实现DOM的联动操作)

    这篇文章主要介绍了Vue中的ref作用详解(实现DOM的联动操作),需要的朋友可以参考下
    2017-08-08
  • Vue3中pinia用法示例

    Vue3中pinia用法示例

    这篇文章主要介绍了Vue3中使用pinia,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-07-07
  • vue双向数据绑定指令v-model的用法

    vue双向数据绑定指令v-model的用法

    这篇文章主要介绍了vue双向数据绑定指令v-model的用法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08

最新评论