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;
}
}
}
});