简单粗暴

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. mob免费短信验证码安卓SDK调用方法

    很不错的一款免费验证码平台,支持IOS.安卓,比那些收费的稳定.开发容易.分享给大家,希望大家不要滥用 官网: http://mob.com/ 官方有开发文档,但是有几点要注意的官方没有提到,导致初始 ...

  2. BurpSuite抓App数据包的方法

    软件准备: 1.猎豹wifi 2.BurpSuite或者fillder都可以 查看电脑IP地址: 网卡ip: 确保无线网卡的IP和手机的代理IP保持一致即可

  3. jQuery.lazyload详解

    <SCRIPT src="jquery.js" type=text/javascript></SCRIPT> <SCRIPT src="jq ...

  4. SpringMyBatis解析3-MapperFactoryBean

    在使用mybatis的时候,我们获取dao的方式一般是这样: SqlSession session=sessionFactory.openSession(); PersonDao personDao= ...

  5. poj2385 dp(递推)

    题目链接 :http://bak3.vjudge.net/contest/136499#problem/D 题意: //转移方程dp[i][j]=max(dp[i-1][j],dp[i-1][j-1] ...

  6. hdu1106 排序水题

    Problem Description 输入一行数字,如果我们把这行数字中的‘5’都看成空格,那么就得到一行用空格分割的若干非负整数(可能有些整数以‘0’开头,这些头部的‘0’应该被忽略掉,除非这个整 ...

  7. 2016.8.25 JavaScript入门之二

    1.字符串中,引用字符串:要用/"转换: 例如:var myStr="I am a \"double quoted\" string inside \" ...

  8. SU unisam命令学习

  9. 手持终端PDA应用固定资产管理系统(资产查询 盘点)软件程序系统

    一.产品概述 固定资产管理系统,是针对企事业单位内部资产管理中出现的工作量大.过程繁琐.追踪困难等一系列难题开发的一套先进管理软件.软件实现了对资产的多种方式管理,目前包括条形码.二维码.RFID管理 ...

  10. 20145223 《Java程序程序设计》实验报告4

    20145223杨梦云Java实验四<Andoid开发基础> 实验内容 安装Android Studio 运行安卓AVD模拟器 使用Android运行出模拟手机并显示自己的学号 实验步骤 ...