vue 倒计时结束跳转页面实现代码
更新时间：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 倒计时跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了jdk1.8+vue elementui实现多级菜单功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-09-09
本篇文章主要介绍了Vue.js移动端左滑删除组件的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
我的页面是从一个vue页面router跳转到另一个vue页面,并且利用windows.open() 浏览器重新创建一个页签,但是不知道为什么有时候可以有时候又不行,所以本文给大家介绍了vue router解决路由带参数跳转时出现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 工程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
父子组件之间的双向绑定非常简单，但是很多人因为是从Vue 2+开始使用的，可能不知道如何双向绑定，接下来通过本文给大家介绍Vue父子组件双向绑定传值的实现方法,需要的朋友可以参考下2018-07-07
vue3配置permission.js和router、pinia实现路由拦截的简单步骤
这篇文章主要介绍了如何在场景网站中实现对未登录用户访问的拦截,通过配置Pinia,创建一个user.js文件来存储用户数据,并在main.js中进行配置,同时通过在router目录下创建permission.js文件,可以实现对未登录用户的拦截,需要的朋友可以参考下2024-11-11
最新评论