HTML:

<span>{{minute}}:{{second}}</span>

script:

一         

// 倒计时
num(n) {
return n < 10 ? '0' + n : '' + n
},
timer () {
var _this = this
var time = window.setInterval(function () {
if (_this.seconds === 0 && _this.minutes !== 0) {
_this.seconds = 59
_this.minutes -= 1
} else if (_this.minutes === 0 && _this.seconds === 0) {
_this.seconds = 0
window.clearInterval(time)
} else {
_this.seconds -= 1
}
}, 1000)
}

三      

 mounted() {
this.timer()
},
watch: {
second: {
handler (newVal) {
this.num(newVal) }
},
minute: {
handler (newVal) {
this.num(newVal)
}
}

vue 15分钟倒计时的更多相关文章

  1. vue组件 订单支付15分钟倒计时

    //支付倒计时 ComputetTime(data) { let st = data.currentTime.replace(/\-/g, "/"),//当前服务器时间 ct = ...

  2. Vue 页面15分钟无操作时返回首页

    这种需求手机端和pc端一般是不存在的,因为都是可以手动操作刷新的. 最近在做一个户外社区大屏的项目,因为大屏是全屏显示,没法手动刷新,不可能在页面专门做一个刷新按钮,也不好看,那这样的需求就显得格外重 ...

  3. 15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码)

    15分钟带你了解前端工程师必知的javascript设计模式(附详细思维导图和源码) 前言 设计模式是一个程序员进阶高级的必备技巧,也是评判一个工程师工作经验和能力的试金石.设计模式是程序员多年工作经 ...

  4. 获取当前时间UTC时间的下一个15分钟时间点

    ZonedDateTime zdt = ZonedDateTime.now(ZoneOffset.UTC); int now15Minute = zdt.getMinute() / P15MINUTE ...

  5. 15分钟学会使用Git和远程代码库

    git是个了不起但却复杂的源代码管理系统.它能支持复杂的任务,却因此经常被认为太过复杂而不适用于简单的日常工作.让我们诚实一记吧:Git是复杂的,我们不要装作它不是.但我仍然会试图教会你用(我的)基本 ...

  6. Bash脚本15分钟进阶教程

    转载: Bash脚本15分钟进阶教程 这里的技术技巧最初是来自谷歌的"Testing on the Toilet" (TOTT).这里是一个修订和扩增版本. 脚本安全 我的所有ba ...

  7. mysql查超过15分钟未付款的订单,更新为失效状态

    个人打开自己的订单时,才检查超过15分钟未付款的订单, 暂不使用机器人,更新状态, Difference counter 差分计数器订单超过15分钟.mysql的时间戳差分比较 $sql =  TIM ...

  8. 15分钟理解HTTPS——通俗篇

    | 导语 它很深奥吗?你肯定常常见过它,使用它,甚至离不开它... 它很浅显吗?你可能觉得看透它,理解它,甚至懂它... 让我们用15分钟,不那么学术地将它的深挖到底~ 什么?如何证明我是我?本文要上 ...

  9. 15分钟在笔记本上搭建 Kubernetes + Istio开发环境

    11月13~15日,KubeCon 上海大会召开,云原生是这个秋天最火热的技术.很多同学来问如何上手 Kubernetes和Istio 服务网格开发.本文将帮助你利用Docker CE桌面版,15分钟 ...

随机推荐

  1. ant__property标签的含义与使用

    property标记用于设置属性 属性是键值对,其中每个值都与键相关联,属性用于设置可在构建文件中的任务位置访问的值,设置属性后无法更改 Apache Ant属性类型有两种:内置属性 / 用户定义的属 ...

  2. (转载)Unity UGUI点击不同Button执行不同的方法(无参方法)

      将脚本随意挂在任何位置 但是这个btnParent一定是 按钮的父节点   脚本很简单自己敲一遍就全都明白了 上脚本 OnClickTest using UnityEngine; using Un ...

  3. Architectural principles

    原文 "If builders built buildings the way programmers wrote programs, then the first woodpecker t ...

  4. 7、zabbix使用进阶(03)

    节知识点: zabbix自动发现 web监控 zabbix自动发现   官网:https://www.zabbix.com/documentation/4.0/zh/manual/discovery/ ...

  5. SOAPdenovo组装软件使用记录

    背景: 1.为什么要从头测序组装基因组? 基因组是不同表型的遗传基础:获得参考基因组是深入研究一个生物体全基因组的第一步也是必须的一步:从头测序组装能够对新的测序物种构建参考基因组: 2.为什么要研究 ...

  6. Lab 6-3

    In this lab, we'll analyze the malware found in the file Lab06-03.exe. Questions and Short Answers C ...

  7. Android Vector曲折的兼容之路

    Android Vector曲折的兼容之路 两年前写书的时候,就在研究Android L提出的Vector,可研究下来发现,完全不具备兼容性,相信这也是它没有被广泛使用的一个原因,经过Google的不 ...

  8. dedecmsv5.7 前台模版里输出变量

    如何在PHP文件查询出来的数据赋值给前端页面展示出来? 例如: PHP文件:agency.php require_once(dirname(__FILE__) . '/../../include/co ...

  9. 『Python CoolBook』使用ctypes访问C代码_下_demo进阶

    点击进入项目 这一次我们尝试一下略微复杂的c程序. 一.C程序 头文件: #ifndef __SAMPLE_H__ #define __SAMPLE_H__ #include <math.h&g ...

  10. 数据分析库之Numpy

    Numpy get started NumPy中我们要学习的核心其实就是一个 ndarray n多 d dimension 维度 array数组 多维数组 创建一个ndarray的几种方法 impor ...