vue 倒計時結束跳轉頁面實現(xiàn)代碼
更新時間：2023年10月12日 10:37:32 作者：愛喝冰可樂
在商場大家經常看到停車收費倒計時支付頁面,今天小編通過本文給大家分享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 倒計時跳轉頁面內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Vue子組件調用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內容,需要的朋友可以參考下2021-09-09
下面小編就為大家分享一篇vue綁定的點擊事件阻止冒泡的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
jdk1.8+vue elementui實現(xiàn)多級菜單功能
這篇文章主要介紹了jdk1.8+vue elementui實現(xiàn)多級菜單功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
本篇文章主要介紹了Vue.js移動端左滑刪除組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
vue router解決路由帶參數(shù)跳轉時出現(xiàn)404問題
我的頁面是從一個vue頁面router跳轉到另一個vue頁面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個頁簽,但是不知道為什么有時候可以有時候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉時出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue之如何配置默認顯示頁面和默認路由問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue3-新特性defineOptions和defineModel示例詳解
在Vue3.3中新引入了defineOptions宏主要是用來定義Option API的選項,可以用defineOptions定義任意的選項,props、emits、expose、slots除外,本文給大家介紹Vue3-新特性defineOptions和defineModel,感興趣的朋友一起看看吧2023-11-11
詳解從零搭建 vue2 vue-router2 webpack3 工程
本篇文章主要介紹了詳解從零搭建 vue2 vue-router2 webpack3 工程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
父子組件之間的雙向綁定非常簡單，但是很多人因為是從Vue 2+開始使用的，可能不知道如何雙向綁定，接下來通過本文給大家介紹Vue父子組件雙向綁定傳值的實現(xiàn)方法,需要的朋友可以參考下2018-07-07
vue3配置permission.js和router、pinia實現(xiàn)路由攔截的簡單步驟
這篇文章主要介紹了如何在場景網(wǎng)站中實現(xiàn)對未登錄用戶訪問的攔截,通過配置Pinia,創(chuàng)建一個user.js文件來存儲用戶數(shù)據(jù),并在main.js中進行配置,同時通過在router目錄下創(chuàng)建permission.js文件,可以實現(xiàn)對未登錄用戶的攔截,需要的朋友可以參考下2024-11-11