vue的时分倒计时

HTML：

<p>支付剩余时间：<span id="countdown">{{minute}}:{{second}}</span></p>

　　

在data里面定义时分的初始值

这个vue项目 是设计 10分钟的倒计时

所以

data(){
    return{
         minute:10,
         second:0
    }
}

　　

触发倒计时时间的函数

submit: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)
}

　　

使倒计时保持两位数的函数

num: function (n) {
	 return n < 10 ? '0' + n : '' + n
},

　　

计算属性计算minnute和second

computed: {
	second: function () {
		 return this.num(this.seconds)
	}, 
	minute: function () {
		return this.num(this.minutes)
	}
}

　　

 

转载于:https://www.cnblogs.com/houqq/p/9754254.html