vue写时分的自动倒计时。

看代码:

<p>
    <img src="../../assets/chengsetanhao-icon.png" style="margin-right:0.05rem;">
    请在
    <span>{{minute}}:{{second}}</span> 分钟内完成支付,否则将取消订单!
</p>

export default {
  data() {
    return {
      minutes: 5,
      seconds: 0
    };
  },
  mounted() {
    this.add();
  },
  methods: {
    // 倒计时
    num: function(n) {
      return n < 10 ? "0" + n : "" + n;
    },
    add: function() {
      var _this = this;
      var time = window.setInterval(function() {
        if (_this.seconds === 0 && _this.minutes !== 0) {
          _this.seconds = 59;
          _this.minutes -= 1;
        } else if (_this.minutes === 0 && _this.seconds === 0) {
          _this.seconds = 0;
          window.clearInterval(time);
        } else {
          _this.seconds -= 1;
        }
      }, 1000);
    },
    goBack() {
      this.$router.back();  //返回上一页
    }
  },
  watch: {
    second: {
      handler(newVal) {
        this.num(newVal);
      }
    },
    minute: {
      handler(newVal) {
        this.num(newVal);
      }
    }
  },
  computed: {
    second: function() {
      return this.num(this.seconds);
    },
    minute: function() {
      return this.num(this.minutes);
    }
  }
};

还有一个倒计时结束后跳转到指定页面的写法

<p class="success_psd_dv_time">{{time}}秒后跳转到个人信息页面</p>


<script>
export default {
   data() {
    return {
       time:0,
    };
  },
  mounted() {
    let THIS=this;
    THIS.time=2;
    setInterval(THIS.countDown,1000);
  },
  methods:{
     countDown(){
      let THIS=this;
      THIS.time--;
    }
  },
//监听事件
  watch:{
    'time':function(newVal,oldVal){
          if(newVal==0){
            this.$router.push('/Personal_details'); //跳转到指定页面
          }
    }
  } 
}
</script>

感谢百度找到的各位大神的帮助!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值