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

Posted 2020-10-23 丰城人

需求分析：

页面倒计时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>