vue中循环倒计时怎么实现

vue中倒计时怎样实现

一、问题描述

我在使用setInterval的同时使用clearInterval，倒计时不生效，不使用clearInterval倒计时又清除不了，该怎么解决呢？

二、解决办法

宗旨就是：将定时器和定时内容分开写
data中定义onOff表示滑块打开关闭，timeShow表示倒计时间和文字是否显示，secondValue表示选择的倒计时时间，secondTime倒计记时时间，contentValue
显示的时间。

//离开页面，销毁定时器
beforeDestroy(){
	clearInterval(this.timer)
},

methods:{
	time(){
	//倒计时的内容
		this.secondTime--;
		this.contentTime=this.secondTime;
		if(this.secondTime==0){
			this.getList();
			this.secondTime=this.secondValue;
		}
	},
	timeChange(val){
	//下拉选择时间变化
		this.timeShow=false;
		this.secondValue=val;
		this.secondTime=val;
		this.contentTime=this.secondTime;
		if(this.onOff==true){
			this.timeShow=true
		}
	},
	refreshData(val){
	//滑块滑动时间；
		this.onOff=val
	}
},
watch:{
	onOff(newData){
	//循环倒计时，因为默认进入页面倒计时10s&#x