Vue中使用倒计时

最新推荐文章于 2024-03-29 01:21:58 发布

置顶 '﹏年轻不一定轻浮

最新推荐文章于 2024-03-29 01:21:58 发布

阅读量276

点赞数 1

文章标签： vue 倒计时

本文链接：https://blog.csdn.net/qq_42859055/article/details/95176460

版权

Vue中使用倒计时

最近项目中的一些小东西拿出来分享一下，有希望对大家有用。

<template>
	<div class="hello">
		 <p>{{minute}}分{{second}}秒</p>
	</div>
</template>
           
            <script>
            export default {
            	data(){
            		return {
            			minutes: 29,   // 此处修改分钟数量
      					 seconds: 59,     // 此处修改秒数数量
            		}
            	},
            	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 () {
			        // console.log(this.minutes, this.seconds);
			        if(this.num(this.minutes)=='00' && this.num(this.seconds)=='00'){
			          this.paystatus = 0;
			        }
			        return this.num(this.minutes);
			      }
			    }
            }
            </script>