简单粗暴

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 19D Points(线段树+map)

    开始想不通,后来看网上说是set,就有一个想法是对每个x建一个set...然后又想直接建立两重的set就好,最后发现不行,自己想多了...  题意是给你三种操作:add (x y) 平面添加(x y) ...

  2. Almost Sorted Array

    http://acm.hdu.edu.cn/contests/contest_showproblem.php?cid=646&pid=1006 #include<iostream> ...

  3. cve-2015-1635漏洞分析

    上周(2015.4.15)爆出的cve-2015-1635漏洞,遂分析一番,留作记录.使用poc如下. wget 192.168.16.168/welcome.png --debug --header ...

  4. css3易混淆属性详解

    1.background,  background-color,   color (1)background:在一个声明中设置所有属性: 如:background: #00FF00 url(bgima ...

  5. hdu 并查集分类(待续)

    hdu 1829 A Bug's Life 题目大意: 给你n个动物,输入m行a,b,表示a和b应该是异性的,要你判断是否有同性恋. 并查集中,1到n代表应性别,n+1到2n代表一个性别,合并一下,判 ...

  6. TeeChart Pro 5.0

    这是Delphi7自带例子 C:\Program Files\Borland\Delphi7\Demos\TeeChart 以下为翻译的文字,有部分不准确. TeeChart Pro 5.0是一个库 ...

  7. 转:delphi 删除指定文件夹下所有文件

    function TFtpContentThd.DeleteDirectory(NowPath: string): Boolean; var search: TSearchRec; ret: inte ...

  8. # asp.net core 1.0 项目结构

    1.环境 开发:VS2015 平台:window 7 2.解决方案级别结构 创建一个ASP.NET 5 Template Empty项目: src:存放项目(projects) global.json ...

  9. android6.0 适配的问题——activity销毁的问题

    1.最近我去运行我们公司所开发的APP,发现出现很多问题,就是从前一个页面跳到另外一个页面后,前一个页面会被销毁. 正常来说,activity跳转过程是这样: A: 存在intent +setActi ...

  10. WPF中ComboBox用法

    The ComboBox control is in many ways like the ListBox control, but takes up a lot less space, becaus ...