简单粗暴

export default {
        data () {
            return {
                timer: 30,       //默认倒数30秒
                stop : false,   //默认是停止的,但界面加载之后会变成false
                Interval:null  //setInterval的对象
            }
        },
        methods : {
            update () {
                if(this.timer <= 0)
                {
                    this.timer = 30;
                }
                else{
                    this.timer--;
                }
            },
            startTimer () {
                //如果是false就开始倒计时,如果是true就停止倒计时
                if(this.stop == false)
                {
                    this.Interval = setInterval(this.update,1000);
                }
                else
                {
                    clearInterval(this.Interval);
                }

                this.stop = !this.stop;
            }
        }
    }

vue 倒计时的更多相关文章

  1. vue 倒计时返回首页

    1. vue页面15分钟无操作时返回首页 2. 基于vue的倒计时demo 3. 在vue2.0项目中一个简单的倒计时功能 4. vue重新发送验证码 5. 表格<td>里面文字垂直显示

  2. vue 倒计时 iOS无效

    vue实现的倒计时在苹果手机上无效,原因是因为后台返回的时间格式是'2019-1-29 17:13:04',而苹果手机只能解析这种时间格式'YYYY/MM/DD HH:mm:ss',修改后测试成功的代 ...

  3. vue倒计时:天时分秒

    data数据定义 data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', se ...

  4. Vue 倒计时组件封装

    项目中需要用到倒计时的功能,封装了一个组件. 代码解读: 1:created周期中获取传入参数时间的剩余秒数: this.initSecondsLeft() 并绑定间隔事件 intervalEvent ...

  5. vue 倒计时组件

    <template> <span> <i v-text="msg"></i> </span></template& ...

  6. vue倒计时页面

    https://www.cnblogs.com/sichaoyun/p/6645042.html https://blog.csdn.net/sinat_17775997/article/detail ...

  7. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

  8. vue 设计一个倒计时秒杀的组件

    简介: 倒计时秒杀组件在电商网站中层出不穷  不过思路万变不离其踪,我自己根据其他资料设计了一个vue版的 核心思路:1.时间不能是本地客户端的时间  必须是服务器的时间这里用一个settimeout ...

  9. vue实现验证码倒计时60秒的具体代码

    vue实现验证码倒计时60秒的具体代码 <span v-show="show" @click="getCode">获取验证码</span> ...

随机推荐

  1. codeforces 519E A and B and Lecture Rooms LCA倍增

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Submit Status Prac ...

  2. 【bzoj2440】【bzoj3994】莫比乌斯反演学习

    哇..原来莫比乌斯代码这么短..顿时感觉逼格-- 写了这道题以后,才稍稍对莫比乌斯函数理解了一些 定理:和是定义在非负整数集合上的两个函数,并且满足条件,那么我们得到结论 在上面的公式中有一个函数,它 ...

  3. IE下Array.prototype.slice.call(params,0)

    i8 不支持 Array.prototype.slice.call(params,0) params可以是 HTMLCollection.类数组.string字符串

  4. Codeforces 567C Geometric Progression(思路)

    题目大概说给一个整数序列,问里面有几个包含三个数字的子序列ai,aj,ak,满足ai*k*k=aj*k=ak. 感觉很多种做法的样子,我想到这么一种: 枚举中间的aj,看它左边有多少个aj/k右边有多 ...

  5. python 代码片段19

    #coding=utf-8 # 函数 def foo(x): print x foo(123) # import httplib def check_web_server(host,port,path ...

  6. nginx配置文件中的location中文详解

    location 语法:location [=|~|~*|^~] /uri/ { … }默认:否 上下文:server 这个指令随URL不同而接受不同的结构.你可以配置使用常规字符串和正则表达式.如果 ...

  7. jquery放大镜效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  8. 【HDU】3480 Division

    http://acm.hdu.edu.cn/showproblem.php?pid=3480 题意:一个n个元素的集合S要求分成m个子集且子集并为S,要求$\sum_{S_i} (MAX-MIN)^2 ...

  9. Codeforces Beta Round #1

    A题,水题. B题也是水题,弄的比较麻烦,前几天队内赛见过,水题怎么水都能过. C题 题意:给出正n边形上的三个点,求最小的正n边形的面积. 以前貌似见过此题.思路也没什么进展,就是枚举n,通过旋转a ...

  10. 【BZOJ2049】 [Sdoi2008]Cave 洞穴勘测 LCT/并查集

    两种方法: 1.LCT 第一次LCT,只有link-cut和询问,无限T,到COGS上找了数据,发现splay里的父亲特判出错了(MD纸张),A了,好奇的删了反转T了.... #include < ...