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. 绘制COCO数据集结果

    import os import time import datetime import mmcv import cv2 as cv import json import numpy as np im ...

  2. C# 在创建窗口句柄之前,不能在控件上调用 Invoke 或 BeginInvoke

    http://www.cnblogs.com/fish124423/archive/2012/10/16/2726543.html 在Invoke(....)之前加上1 this.components ...

  3. (转) Ensemble Methods for Deep Learning Neural Networks to Reduce Variance and Improve Performance

    Ensemble Methods for Deep Learning Neural Networks to Reduce Variance and Improve Performance 2018-1 ...

  4. 如何恢复IIS出厂默认设置

    How to restore IIS settings and Default Web Site? http://superuser.com/questions/704850/how-to-resto ...

  5. Go 函数方法

    在 Go 语言中,函数和方法不太一样,有明确的概念区分.其他语言中,比如 PHP 函数就是方法,方法 就是函数,但在 Go 语言中,函数是不属于任何结构体.类型的方法,也就是说函数是没有接收者的:而方 ...

  6. TestMap

    public class TestMap { public static void main(String[] args) { Map map=new HashMap(); //在此映射中关联指定值与 ...

  7. 【NET Core】 缓存 MemoryCache 和 Redis

    缓存接口 ICacheService using System; using System.Collections.Generic; using System.Threading.Tasks; nam ...

  8. 【Core】.NET Core中读取App.config配置文件

    1.项目中添加App.config文件 因为.NET Core的项目本质是控制台应用,所以ConfigurationManager的API会去默认读取app.config配置文件,而不是web.con ...

  9. 文件下载 路径中有中文 报错 提示 文件找不到 java.io.FileNotFoundException: http://192.168.1.141:8096/resources/card/comcard/????????/????????.png

    此问题主要是中文编码格式不对导致的,将路径中的中文部分设置下编码就可以啦 例如: String url =  "http://192.168.1.141:8096/resources/car ...

  10. Log4Net 添加自定义字段并保存到数据库

    Log4Net是常用的功能强大的日志插件,该插件提供了几个默认字段 大家可能都用过Log4Net插件来记录日志,该插件默认提供了这几个字段@log_date, @thread, @log_level, ...