vue倒计时15分钟

<p>支付剩余时间  <span>{{minute}}:{{second}}</span></p>
new Vue({
    el:'#app',
    data:{
      uid:'',             //用户id
      oid:'',             //订单id
      paymoney:0,         //支付金额
      minutes: 15,        //倒计时分
      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)
      },

    },
    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)
      }
    }
  })

猜你喜欢

转载自blog.csdn.net/qq_35376043/article/details/108468597