zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    今日总结
    今日总结
    今日总结
    今日总结
    今日总结
    今日总结
    今日总结
    今日总结
    今日总结
    自学Java0721
  • 原文地址:https://www.cnblogs.com/luojunweb/p/8409932.html
Copyright © 2011-2022 走看看