列表页面多个倒计时

<template>
	<div class="home-wrap">
		<ul class="home-list">
			<template v-for="(item,index) in listArray">
				<li class="home-item" v-bind:countdown = "item.time" :key="index">
					<span>{{item.name}}</span>
					<span :id="'countdown'+index"></span>
				</li>
			</template>
		</ul>
	</div>
</template>

<script>
	export default {
		name:"home",
		data(){
			return {
				listArray:[{
					time:36000,
					name:"支付"
				},{
					time:754,
					name:"支付"
				},{
					time:457,
					name:"支付"
				},{
					time:3567,
					name:"支付"
				}]
			}
		},
		mounted() {
			document.getElementsByClassName("home-item").forEach((item,index)=>{
				let countdown=item.getAttribute("countdown");
				this.daojishi(countdown,"countdown"+index)
			})
		},
		computed:{
			
		},
		methods:{
			countdown(result){
				var h = Math.floor(result / 3600) < 10 ? '0'+Math.floor(result / 3600) : Math.floor(result / 3600);
				var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
				var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
				if(h==0){
					result = m + ":" + s;
				}else{
					result = h+':'+m + ":" + s
				}    
				return result;
			},
			daojishi(time,handle){
				var timer=setInterval(()=>{
					if(time>=0){
						document.getElementById(handle).innerHTML=this.countdown(time)
						time--
					}else{
						document.getElementById(handle).innerHTML=" "
						clearInterval(timer)
					}	 
				},1000)
			}
		},
		destroyed() {
			location.reload()
		}
	}
</script>

<style  lang="scss" scoped="scoped">
	.home-wrap{
		width: 91.47%;
		display: flex;
		flex-direction: column;
		margin: 20px auto;
		.home-list{
			border: 1px solid #f5f4f4;
			display: flex;
			flex-direction: column;
			.home-item{
				border-bottom: 1px solid #f5f4f4;
				height: 50px;
				line-height: 50px;
				text-align: center;
			}
			.home-item:last-child{
				border-bottom: 10;
			}
		}
	}
</style>