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完成项目后,打包成静态文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在微信小程序中,默认情况下,文件预览功能不支持文档缩放,导致用户在遇到小字体时难以清晰阅读,为了解决这一问题并提升用户体验,实现文档的缩放功能至关重要,所以本文2024-12-12
自定义指令是 vue 中使用频率仅次于组件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五个生命周期钩子，接下来通过本文给大家详细介绍Vue指令工作原理实现方法，需要的朋友参考下吧2021-06-06
本篇文章主要介绍了浅谈Vuex状态管理(全家桶)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了vue element如何添加遮罩层问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下2022-11-11
这篇文章主要给大家介绍了关于Vue 2.0中生命周期与钩子函数的相关资料，对大家学习或者使用vue2.0具有一定的参考学习价值，需要的朋友们下面随小编一起来看看吧。2017-05-05
uni-app 使用编辑器创建vue3 项目并且运行的操作方法
这篇文章主要介绍了uni-app 使用编辑器创建vue3 项目并且运行的操作方法,目前uniapp 创建的vue3支持 vue3.0 -- 3.2版本 也就是说setup语法糖也是支持的，需要的朋友可以参考下2023-01-01
本文详细介绍了如何在Vue3项目中集成Electron,包括安装electron和electron-builder两个依赖,以及配置.npmrc文件和手动修改镜像源的方法,整个过程详细记录了从创建项目、安装依赖、修改配置、到最终打包部署的每一步2024-10-10
html页面引入vue组件之http-vue-loader.js解读
这篇文章主要介绍了html页面引入vue组件之http-vue-loader.js解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论