vue写时分的自动倒计时。
看代码:<p><img src="../../assets/chengsetanhao-icon.png" style="margin-right:0.05rem;">请在<span>{{minute}}:{{second}}</span> 分钟内
·
看代码:
<p>
<img src="../../assets/chengsetanhao-icon.png" style="margin-right:0.05rem;">
请在
<span>{{minute}}:{{second}}</span> 分钟内完成支付,否则将取消订单!
</p>
export default {
data() {
return {
minutes: 5,
seconds: 0
};
},
mounted() {
this.add();
},
methods: {
// 倒计时
num: function(n) {
return n < 10 ? "0" + n : "" + n;
},
add: function() {
var _this = this;
var time = window.setInterval(function() {
if (_this.seconds === 0 && _this.minutes !== 0) {
_this.seconds = 59;
_this.minutes -= 1;
} else if (_this.minutes === 0 && _this.seconds === 0) {
_this.seconds = 0;
window.clearInterval(time);
} else {
_this.seconds -= 1;
}
}, 1000);
},
goBack() {
this.$router.back(); //返回上一页
}
},
watch: {
second: {
handler(newVal) {
this.num(newVal);
}
},
minute: {
handler(newVal) {
this.num(newVal);
}
}
},
computed: {
second: function() {
return this.num(this.seconds);
},
minute: function() {
return this.num(this.minutes);
}
}
};
还有一个倒计时结束后跳转到指定页面的写法
<p class="success_psd_dv_time">{{time}}秒后跳转到个人信息页面</p>
<script>
export default {
data() {
return {
time:0,
};
},
mounted() {
let THIS=this;
THIS.time=2;
setInterval(THIS.countDown,1000);
},
methods:{
countDown(){
let THIS=this;
THIS.time--;
}
},
//监听事件
watch:{
'time':function(newVal,oldVal){
if(newVal==0){
this.$router.push('/Personal_details'); //跳转到指定页面
}
}
}
}
</script>
感谢百度找到的各位大神的帮助!
更多推荐
已为社区贡献1条内容
所有评论(0)