Exemple de composant VUE : Comment le composant VUE implémente-t-il le compte à rebours ?

Cet article vous apporte un exemple du composant VUE : Comment le composant VUE implémente-t-il le compte à rebours ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Rendu :

2. 3. Code HTML

.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;
}

4. Code JavaScript

<p class="wrap">
    <countdown seconds="15" index="1"></countdown>
    <countdown seconds="30" index="2"></countdown></p>

Recommandations associées :

// 倒计时组件
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: `<div class="box">倒计时 <span class="count-number">{{timerCount < 10 ? &#39;0&#39; + timerCount : timerCount}}</span> 秒</div>`
});

// Vue实例
new Vue({
    el: &#39;.wrap&#39;
});

Mécanisme de prototype en JS : implémentation de l'héritage et de l'extension des constructeurs et de leurs instances

Communication entre les sous-composants Vue et les composants parents (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!