快捷導(dǎo)航

vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面實(shí)現(xiàn)代碼

更新時(shí)間：2023年10月12日 10:37:32 作者：愛喝冰可樂

在商場(chǎng)大家經(jīng)常看到停車收費(fèi)倒計(jì)時(shí)支付頁面,今天小編通過本文給大家分享vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面功能,感興趣的朋友一起看看吧

vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面

在這里插入圖片描述

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中倒計(jì)時(shí)3秒后跳轉(zhuǎn)頁面

<template>
  <div id="home">
      <div>{{ count }}s后將自動(dòng)跳轉(zhuǎn)到登錄頁！</div> 
    </div>
</template>
<script>
export default {
    data(){
        return {
            count:"",//倒計(jì)時(shí)
        }
    }
},
created(){
   ??????this.threeGo()
},
methods: {
  //3秒后進(jìn)入跳轉(zhuǎn)頁面
    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;
				//跳轉(zhuǎn)的頁面寫在此處
				this.$router.push({
					path: ''
				});
			}
		  },1000)
		}
    },
}
</script>

到此這篇關(guān)于vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁面的文章就介紹到這了,更多相關(guān)vue 倒計(jì)時(shí)跳轉(zhuǎn)頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue子組件調(diào)用父組件方法案例詳解
這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例
下面小編就為大家分享一篇vue綁定的點(diǎn)擊事件阻止冒泡的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實(shí)現(xiàn)多級(jí)菜單功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題
我的頁面是從一個(gè)vue頁面router跳轉(zhuǎn)到另一個(gè)vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁簽,但是不知道為什么有時(shí)候可以有時(shí)候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題,需要的朋友可以參考下
2024-03-03
vue之如何配置默認(rèn)顯示頁面和默認(rèn)路由
這篇文章主要介紹了vue之如何配置默認(rèn)顯示頁面和默認(rèn)路由問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項(xiàng),可以用defineOptions定義任意的選項(xiàng),props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧
2023-11-11
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-11-11
Vue父子組件雙向綁定傳值的實(shí)現(xiàn)方法
父子組件之間的雙向綁定非常簡(jiǎn)單，但是很多人因?yàn)槭菑腣ue 2+開始使用的，可能不知道如何雙向綁定，接下來通過本文給大家介紹Vue父子組件雙向綁定傳值的實(shí)現(xiàn)方法,需要的朋友可以參考下
2018-07-07
vue3配置permission.js和router、pinia實(shí)現(xiàn)路由攔截的簡(jiǎn)單步驟
這篇文章主要介紹了如何在場(chǎng)景網(wǎng)站中實(shí)現(xiàn)對(duì)未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個(gè)user.js文件來存儲(chǔ)用戶數(shù)據(jù),并在main.js中進(jìn)行配置,同時(shí)通過在router目錄下創(chuàng)建permission.js文件,可以實(shí)現(xiàn)對(duì)未登錄用戶的攔截,需要的朋友可以參考下
2024-11-11