vue.js实现页面倒计时跳转功能

Posted 丰城人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js实现页面倒计时跳转功能相关的知识,希望对你有一定的参考价值。

需求分析:

页面倒计时5秒后进入系统主页,数字需要实时更新!

<template>
  <div class="">
    <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(){
      let THIS=this;
      THIS.time--;
    }

  },
  mounted(){
    let THIS=this;
    THIS.time=5;
    setInterval(THIS.countDown,1000);
  },
  watch:{
    ‘time‘:function(newVal,oldVal){
          if(newVal==0){
            this.$router.push(‘/index‘);
          }
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

以上是关于vue.js实现页面倒计时跳转功能的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js中跳转报错 地址栏改变 页面不改变

[javascript]各种页面定时跳转(倒计时跳转)代码总结

倒计时代码 网址跳转

vue.js实现页面加载完成执行函数

各种页面定时跳转(倒计时跳转)代码总结

htmlcssjs实现背景图的切换和倒计时跳转的功能