• 技术文章 >web前端 >js教程

    制作一个基于vue的倒计时demo

    一个新手一个新手2017-10-11 10:29:39原创1352
    HTML:

     <p id="example">
        <button @click="send">
          <span v-if="sendMsgDisabled">{{time+'秒后获取'}}</span>
          <span v-if="!sendMsgDisabled">send</span>
        </button>
      </p>

    JS:

    var vm = new Vue({
        el: '#example',
        data() {      return {
            time: 60, // 发送验证码倒计时
            sendMsgDisabled: false
          }
        },
        methods: {
          send() {        let me = this;
            me.sendMsgDisabled = true;        
            let interval = window.setInterval(function() {
              if ((me.time--) <= 0) {
                me.time = 60;
                me.sendMsgDisabled = false;
                window.clearInterval(interval); //停止
              }
            }, 1000);
          }
        }
      })

    以上就是制作一个基于vue的倒计时demo 的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:demo 倒计时 基于
    上一篇:js实现双向数据绑定的方法 下一篇:VUE.JS移动端框架Mint UI的使用详细介绍
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 一起聊聊JavaScript函数的定义与基本使用• 详解如何使用Node.js开发一个简单图片爬取功能• JavaScript中的数组知识点总结• JavaScript怎么创建多个对象?详解四种方法• JavaScript DOM API知识串讲
    1/1

    PHP中文网