vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue 倒计时跳转页面

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 倒计时跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文