vue 倒计时结束跳转页面实现代码
作者：爱喝冰可乐
在商场大家经常看到停车收费倒计时支付页面,今天小编通过本文给大家分享vue 倒计时结束跳转页面功能,感兴趣的朋友一起看看吧
vue 倒计时结束跳转页面
data () {
return {
timers: null,
countDown: null
}
}count () {
const count = 15
this.countDown = count
this.timers = setInterval(() => {
if (this.countDown > 0) {
this.countDown--
} else {
clearInterval(this.timers)
this.$router.push('/login')
}
}, 1000)
}激活条件：this.count()
vue中倒计时3秒后跳转页面
<template>
<div id="home">
<div>{{ count }}s后将自动跳转到登录页！</div>
</div>
</template>
<script>
export default {
data(){
return {
count:"",//倒计时
}
}
},
created(){
??????this.threeGo()
},
methods: {
//3秒后进入跳转页面
threeGo(){
const TIME_COUNT = 3;
if(!this.timer){
this.count = TIME_COUNT;
this.show = false;
this.timer = setInterval(()=>{
if(this.count > 0 && this.count <= TIME_COUNT){
this.count--;
}else{
this.show = true;
clearInterval(this.timer);
this.timer = null;
//跳转的页面写在此处
this.$router.push({
path: ''
});
}
},1000)
}
},
}
</script>到此这篇关于vue 倒计时结束跳转页面的文章就介绍到这了,更多相关vue 倒计时跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！