VUE实现倒计时几秒进入系统

最新推荐文章于 2024-10-26 17:22:41 发布

原创最新推荐文章于 2024-10-26 17:22:41 发布 · 749 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

1 篇文章

订阅专栏

直接上代码，不啰嗦

vue实现登录之后几秒进入系统或者几秒之后进入某个页面

<template>
    <div>
        <h1>欢迎来到Vue.js项目首页</h1>
        <h2>你将在<span style="color:red">{{time}}</span>秒后进入系统</h2>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data () {
            return {
                time:0,
            }
        },
        methods:{
            countDown(){
                this.time--;
            }
        },
        mounted(){
            this.time=5;
            setInterval(this.countDown,1000);
        },
        watch:{
            'time':function(newVal,oldVal){
                if(newVal==0){
                    this.$router.push('/resource');// 你想要跳转的页面路径
                }
            }
        }

    }
</script>

<style scoped>

</style>