简单粗暴

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. RabbitMQ常用命令

    创建一个用户为mytest,密码为mytest rabbitmqctl add_user mytest mytest 删除一个用户  rabbitmqctl delete_user username ...

  2. PHP public private protected 三种修饰符的区别

    public 表示全局,类内部外部子类都可以访问:private表示私有的,只有本类内部可以使用:protected表示受保护的,只有本类或子类或父类中可以访问:

  3. scau 8637 阶乘与因子 筛素数

    时间限制:500MS  内存限制:1000K提交次数:189 通过次数:46 题型: 编程题   语言: G++;GCC Description 游戏玩了很久总会厌的,连Lyd的蚂蚁都被放生了.... ...

  4. fzu月赛 2203 单纵大法好 二分

    Accept: 8    Submit: 18Time Limit: 5000 mSec    Memory Limit : 65536 KB  Problem Description 人在做,天在看 ...

  5. 【Xcelsius】在PPT中嵌入水晶易表Xcelsius2008仪表盘

    如果您使用Xcelsius创建了动画图形,并将其保存为 Shockwave® 文件(.swf 文件扩展名).但是往往插入进去之后,会产生一些比较棘手的问题,比如ppt不会自动播放,错误等等.今天把这些 ...

  6. BZOJ2758 : [SCOI2012]Blinker的噩梦

    首先将包含关系建树. 方法是将每个图形拆成上半边和下半边,从左往右扫描线,用Splay从下到上维护扫描线上所有图形. 每次加入一个新的图形$x$的时候,看看它下方第一个图形$y$,如果$y$是上半边, ...

  7. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  8. requestAnimationFrame制作动画:旋转风车

    在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...

  9. Mac下android_sdk配置环境变量

    1.启动Terminal终端工具 2.输入cd ~/ 进入当前用户的home目录 3. 创建: touch .bash_profile 4.打开并编辑: open .bash_profile 5.在文 ...

  10. Leetcode Word Break

    Given a string s and a dictionary of words dict, determine if s can be segmented into a space-separa ...