码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-02-03 17:54:14      阅读:3990      评论:0      收藏:0      [点我收藏+]

标签:index   分析   time   nbsp   eth   首页   style   倒计时   func   

需求分析:

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

标签:index   分析   time   nbsp   eth   首页   style   倒计时   func   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!