Vue implementiert Countdown-Funktion

<div Klasse="itemend">
 <p class="itemss">Countdown<span>{{day}}</span>Tag<span>{{hour}}</span>Stunde<span>{{minute}}</span>Minute<span>{{second}}</span>Sekunde</p>
</div>

Daten() {
 zurückkehren {
 Tag: "", //Tag Stunde: "", //Stunde Minute: "", //Minute Sekunde: "", //Sekunde Flag: false,
 };
 },
 montiert() {
 lass Zeit = setzeIntervall(() => {
 wenn (this.flag == true) {
 ClearInterval(Zeit);
 }
 dies.timeDown();
 }, 500);
 },
 Requisiten: {
 Endzeit: {
 Typ: Zeichenfolge,
 },
 },
 Methoden: {
 timeDown() {
 const endTime = neues Datum(diese.endTime);
 const nowTime = neues Datum();
 let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
 sei d = parseInt(linkeZeit / (24 * 60 * 60));
 sei h = dieses.formate(parseInt((leftTime / (60 * 60)) % 24));
 lass m = dieses.formate(parseInt((leftTime / 60) % 60));
 lass s = dieses.formate(parseInt(leftTime % 60));
 wenn (linkeZeit <= 0) {
 dieses.flag = wahr;
 dies.$emit("Zeit-Ende");
 }
 dieser.Tag = d; //Tag diese.Stunde = h; //Stunde diese.Minute = m; //Minute diese.Sekunde = s; //Sekunde},
 formatieren(Zeit) {
 wenn (Zeit >= 10) {
 Rückgabezeit;
 } anders {
 gibt `0${time}` zurück;
 }
 },
}

<Vorlage>
 <div>
 <Zeiten :endTime='timeEnd'></Zeiten>
 </div> 
</Vorlage>

importiere Zeiten aus "@/components/time";
Standard exportieren {
 Name: "Home",
 Daten() {
 zurückkehren {
 timeEnd: „2021-3-30 9:50“ //Endzeit (Apple-Telefone können „-“ nicht analysieren, daher können Sie das Format in 2021/3/30 ändern)
 },
 
 Komponenten:
 Mal,
 },
};