html页面多个计时器,vue中在一个页面如何设置多个倒计时

function countDownFun(time) {

time--; //时间一秒秒的减

let nowTime = new Date().getTime(); //现在时间

if (nowTime <= time) {

//获取时间差

let timediff = Math.round((time - nowTime) / 1000);

//获取还剩多少天

let day = parseInt(timediff / 3600 / 24);

//获取还剩多少小时

let hour = parseInt((timediff / 3600) % 24);

//获取还剩多少分钟

let minute = parseInt((timediff / 60) % 60);

//获取还剩多少秒

let second = timediff % 60;

return day + "天" + hour + "小时" + minute + "分" + second + "秒";

} else {

return "00天00小时00分00秒";

}

}

export default {

name: "meizhoupintuan",

async created() {

let data = await home_meizhou_api();

this.list = data.data.list;

this.timer();

},

data() {

return {

list: [],

temp: null //倒计时初始

};

},

methods: {

timer() {

//页面多个定时器 //主要逻辑都在这页面更新

let _that = this;

this.temp = setInterval(() => {

this.list.forEach((item, index) => {

item.dayTime = countDownFun(item.endAt);

this.$set(this.list, item.dayTime, countDownFun(item.endAt));

console.log(this.temp, "6");

});

}, 1000);

},

},

destroyed() {

//切记页面销毁需要销毁

clearInterval(this.temp);

console.log(this.temp, "销毁");

}

};