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. SIP协议简单介绍

    sip协议是由IETF提出的IP电话信令协议,主要目的是为了解决ip网络中的信令控制,以及同软交换通信. sip协议类似http协议: 报文结构: start-line message-header ...

  2. WinForm动态查询

    WinForm 动态查询 1. 使用场景 在对数据进行筛选, 包含多个筛选字段时适用. 2. 接口设计 /// <summary> /// 定义可作为追加到 WHERE 子句的控件接口 / ...

  3. Learning-Python【21】:Python常用模块(4)—— re、logging、hashlib、subprocess

    re 模块:与正则相关的模块 在使用 re 模块之前,需要先了解正则表达式(regular expression),描述了一种字符串匹配的模式(pattern),可以用来检查一个字符串是否含有某个子字 ...

  4. 使用windeployqt工具来进行Qt的打包发布

    https://blog.csdn.net/sinat_36264666/article/details/73305712

  5. Go 接口(interface)

        文章转载地址:https://www.flysnow.org/2017/04/03/go-in-action-go-interface.html 1.什么是 interface? 简单的说,i ...

  6. Qgis练手

    师妹推荐了一个神器 Qgis,因为看我拿Echarts和Excel缝缝补补效率实在太低下. 还记得,以前写过一个“echarts画中国地图并上色”的笔记,那个应付一下事还行,真正需要精细画图的时候还得 ...

  7. Linux下执行.sh命令出现-bash: ./bin/start.sh: /bin/bash^M: bad interpreter: No such file or directory

    原因是 文件的格式是dos,修改为unix 就OK了 查看文件格式  用vim 打开出错的文件    按 ESC键     再按shift+冒号   输入 set  ff  回车   可以看见 该文件 ...

  8. js中提示框闪退问题

    当页面存在刷新  或  在线引用iframe框架时(引用框架也会导致刷新) 会导致页面加载时的弹出框闪退 解决方法:设置弹出框在页面或者框架完全加载一段时间后再弹出 <script type=& ...

  9. get UI URL

    DATA:LV_APPL_MODEL TYPE REF TO IF_BSP_WD_APPL_MODEL.    DATA:RV_URL TYPE STRING.     cl_bsp_wd_appl_ ...

  10. easyui datebox时间控件如何只显示年月

    easyui datebox控件,只显示年月,不显示年月日 需要的效果图如下: 具体的js代码: <script> $(function(){ intiMonthBox('costTime ...