首页 > Web开发 > 详细

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

时间:2018-02-03 17:32:06      阅读:529      评论:0      收藏:0      [点我收藏+]

需求分析:

页面倒计时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实现页面倒计时跳转功能

原文:https://www.cnblogs.com/luojunweb/p/8409932.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!