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. asp.net 后台 get,post请求

    //Post请求 public static string Post(string url,string obj=null) { string param = (obj);//参数 byte[] bs ...

  2. asp.net json,对象,字符串的相互转换

    //object 转json格式字符串 public static string ObjectToJsonString(this object obj) { return JsonConvert.Se ...

  3. spring boot2+jpa+thymeleaf增删改查例子

    参考这遍文章做了一个例子,稍微不同之处,原文是spring boot.mysql,这里改成了spring boot 2.Oracle. 一.pom.xml引入相关模块web.jpa.thymeleaf ...

  4. Lintcode97-Maximum Depth of Binary Tree-Easy

    97. Maximum Depth of Binary Tree Given a binary tree, find its maximum depth. The maximum depth is t ...

  5. [BOZJ2721]樱花

    题目求\(\frac{1}{x}+\frac{1}{y}=\frac{1}{n!}\)已知n, x和y的正整数解的个数 设z=\(n!\) \(\frac{1}{x}+\frac{1}{y}=\fra ...

  6. 智能合约 helloworld

    windows 平台 所以直接使用Remix在线编译环境 新建hello.sol文件 编辑如下 Remix 右边侧栏 setting 选择合适的编译器版本 这里选择 0.4.19 文件中输入如下内容  ...

  7. Android 按钮响应事件的几种方式

    目录 1.在布局中指定onClick属性 2.使用匿名内部类 3.在当前Activity中实现OnClickListener接口 4.创建内部类 1.在布局中指定onClick属性 布局代码 < ...

  8. group by查询每组时间最新的一条记录

    最近需要查询每组时间最新的记录 表如下:

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

    jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...

  10. simple shell

    NOW = $(data + "%Y-%m-%d-%H-%M-%S") DIR = /export/backup function exportData(){ exportCmd ...