简单粗暴

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. css新增选择器

  2. class.forname()用法 转

    主要功能 Class.forName(xxx.xx.xx)返回的是一个类 Class.forName(xxx.xx.xx)的作用是要求JVM查找并加载指定的类, 也就是说JVM会执行该类的静态代码段 ...

  3. Something about "for"

    For语句引导了一个循环语句,格式for(::),例for(int i=0;i<100;i++).类似于if()括号的作用for()括号如同if()括号一样也是一个boolean型.int i= ...

  4. Java解析HTML之HTMLParser使用与详解

    http://blog.csdn.net/jediael_lu/article/details/26285951

  5. 三进制状压 HDOJ 3001 Travelling

    题目传送门 题意:从某个点出发,所有点都走过且最多走两次,问最小花费 分析:数据量这么小应该是状压题,旅行商TSP的变形.dp[st][i]表示状态st,在i点时的最小花费,用三进制状压.以后任意进制 ...

  6. bug提交模板

    简述所属版本所属模块严重等级优先级分配给[网络情况][前置条件][详情描述] 1. 2. 3.[预期结果][实际结果][历史版本][备注][是否补充用例] 另外: 1.若和界面有关的bug尽量提供对应 ...

  7. 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法

    众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...

  8. BZOJ3591: 最长上升子序列

    因为是一个排列,所以可以用$n$位二进制数来表示$O(n\log n)$求LIS时的单调栈. 首先通过$O(n^22^n)$的预处理,求出每种LIS状态后面新加一个数之后的状态. 设$f[i][j]$ ...

  9. 关于Div的宽度与高度的100%设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

  10. 《隆重介绍 思源黑体:一款Pan-CJK 开源字体》

    关于思源黑体 思源黑体是谷歌与 Adobe 联合开发,支持简体中文.繁体中文.日文.韩文以及英文:支持 ExtraLight.Light.Normal.Regular.Medium.Bold 和 He ...