VUE 很好用,但是对有些方法支持起来有些坑
比如常用的 setInterval

这个方法一般会用来做一个倒计时,比如点击发送验证码后 的倒计时

这个对象是在window 下的方法,在与vue配合的时候有些问题需要注意一下

第一,为了要停止计时 我们需要把 setInterval 赋值给一个变量 为了之后用 clearInterval()停止计时;
这个变量 不能用 vue 中的 data 来管理,如果使用在之后调用停止的时候无法停止,解决方法

beforeCreate : function(){
                window.intervalObj="";
            },

VUE2.0的一个生命周期钩子,可以在这里给window定义一个全局的变量,
在之后调用setInterval 时赋值给这个变量即可

第二,在 setInterval 中调用的方法可以用vue 的 methods管理,但是在之后调用的时候,不能使用this去调用 即便转换变量

let _that=this;

把vue对象转成安全变量也不行,这里需要使用vue的实例名称,就是在new vue时的变量.方法名才可以,说了这么多最后上个倒计时的代码啦

let doRegister = new Vue({
      el: '#doRegister',
      data: {
        sjyzmBtnText:'获取验证码'
      },
      beforeCreate : function(){
        //@@
        window.intervalObj="";
      },
      methods:{
        begin : function(){
            //@@
          window.intervalObj=setInterval("doRegister.countdown()",1000);
        },
        countdown :function(){
            let phongCount=this.sjyzmBtnText
            if(phongCount=="获取验证码"){
              this.sjyzmBtnText=60;
            }else if(phongCount==0) {
              this.sjyzmBtnText="获取验证码";
              getPhoneCodeIs=true;
              //@@
              clearInterval(intervalObj);
            }else{
              this.sjyzmBtnText=this.sjyzmBtnText-1;
            }

          }
      }
  });
Logo

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐