VUE组件的实例：VUE组件如何实现倒计时？

.box{ width: 300px; height: 100px; line-height: 100px; margin: 100px auto; background-color: #eee; text-align: center; font-size: 30px; color: #666; }.count-number{ color: red; font-size: 30px; font-weight: bold; }

// 倒计时组件 Vue.component('countdown', { props: ['seconds', 'index'], data: () => { return { timerCount: 0 } }, mounted() { this.timing(); }, methods: { timing() { let startTime = localStorage.getItem(`startTime${this.index}`); let nowTime = new Date().getTime(); if(startTime) { let surplus = this.seconds - parseInt((nowTime-startTime) / 1000, 10); this.timerCount = surplus <= 0 ? 0 : surplus; } else { this.timerCount = this.seconds; localStorage.setItem(`startTime${this.index}`, nowTime); } let timer = setInterval(() => { if(this.timerCount > 0 && this.timerCount <= this.seconds) { this.timerCount--; 　　 } else { localStorage.removeItem(`startTime${this.index}`); clearInterval(timer); } }, 1000); } }, template: `
倒计时 {{timerCount < 10 ? '0' + timerCount : timerCount}} 秒
` }); // Vue实例 new Vue({ el: '.wrap' });