So verwenden Sie Dayjs zum Berechnen gängiger Daten in Vue
|
Bei der Verwendung von Vue zur Entwicklung von Projekten muss das Front-End häufig Datums- und Uhrzeitangaben berechnen, beispielsweise:
Empfehlen Sie eine leichte JavaScript-Bibliothek zur Verarbeitung von Uhrzeit und Datum: dayjs Es ist sehr praktisch, dieses Plug-In zu verwenden, um allgemeine Daten zu berechnen 1. Installieren Sie dayjs im Projekt. Der Befehl lautet: 2. Fügen Sie in main.js die folgenden beiden Codezeilen hinzu importiere dayjs von „dayjs“; Vue.prototype.dayjs = dayjs;
3. Verwenden Sie es direkt dort, wo es auf der Seite benötigt wird Das aktuelle Datum oder der Zeitstempel wird konvertiert . Nach dem Format folgt der Inhalt, den Sie formatieren möchten. **dayjs()** setzt keine Parameter in die Klammern. Standardmäßig wird das aktuelle Datum verwendet. Sie können auch einen Zeitstempel zur direkten Konvertierung angeben. (Hinweis: Wenn Sie den Datumswähler der Elementkomponente verwenden, erfordert dessen Wertformatattribut: |
| Komponenten | Dayjs (Format) | Element (Wertformat) |
|---|---|---|
| Jahr | JJJJ | JJJJ |
| Mond | MM | MM |
| Tag | DD | dd |
| Stunde | HH | HH |
| Punkt | mm | mm |
| Zweite | ss | ss |
Die Ausdrücke für Jahr und Tag sind leicht unterschiedlich und können leicht verwechselt werden.)
this.dayjs().format("JJJJ-MM-TT")
this.dayjs().format("JJJJ-MM-TT HH:mm")
this.dayjs(1614787200000).format("JJJJ-MM-TT HH:mm:ss")
2. Berechnen Sie das Start- und Enddatum einer Woche/eines Monats/eines Jahres. Die verwendeten Methoden sind startOf() und endOf() . Die Klammern können "Woche", "Monat" oder "Jahr" sein.
(PS: Das Hinzufügen eines Formats dient einer intuitiveren Darstellung)
this.dayjs().startOf("Woche");
this.dayjs().endOf("Woche").format("JJJJ-MM-TT");
this.dayjs().startOf("Monat").format("JJJJ-MM-TT");
this.dayjs("2021-02-09").endOf("Monat").format("JJJJ-MM-TT");
Berechnen Sie Daten, z. B. vor ein paar Tagen oder ein paar Tage später.
| Vorne (minus) | Nach (Hinzufügen) |
|---|---|
| subtrahieren(Parameter1, Parameter2) | add(Parameter1, Parameter2) |
| Parameter 1 | Nummer |
| Parameter 2 | Einheit ("Woche", "Monat", "Jahr") |
this.dayjs().subtract(3,'day').format("JJJJ-MM-TT")
this.dayjs().subtract(3,'month').format("JJJJ-MM-TT")
this.dayjs().add(12,'day').format("JJJJ-MM-TT")
this.dayjs('2021-03-12').add(45,'day').format("JJJJ-MM-TT")
5. Ermitteln Sie den Tag des Monats mit der Methode dayInMonth()
this.dayjs().daysInMonth();
this.dayjs("2021-02-09").daysInMonth();
this.dayjs("2021-01").daysInMonth();
6. Konvertieren Sie das normale Datum in einen Zeitstempel
dies.dayjs().unix()
dies.dayjs('2020-10-04').unix()
Zusammenfassen
Dies ist das Ende dieses Artikels darüber, wie Vue Dayjs verwendet, um allgemeine Daten zu berechnen. Weitere Informationen zur Berechnung allgemeiner Daten durch Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!
Das könnte Sie auch interessieren:
- Vue+element-ui fügt ein Beispiel für eine benutzerdefinierte Rechtsklick-Menümethode hinzu
- Erstellen Sie testpapierbezogene Funktionen basierend auf Vue und Element (Beispielcode).
- Eine kurze Erläuterung der schnellsten Möglichkeit zum Ändern der Standardeinstellung mit Elementui in Vue
- vue+element_ui lädt Dateien hoch und übergibt zusätzliche Parameter
- Erste Praxis von vue3.0+vue-router+element-plus
- element-plus, ein vue3.x-UI-Framework (erste Erfahrungen mit der Element-UI-Version 3.x)
- So erstellen Sie ein Projekt mit Vue3+elementui plus
- Vue-Element realisiert das Zusammenführen von Tabellenzeilendaten
- Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework
- Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen
<<: Linux/Mac MySQL-Befehlszeilenmethode zum Ändern des Passworts bei vergessenem Passwort
>>: Zusammenfassung der Ubuntu-Sicherungsmethoden (vier Typen)
Artikel empfehlen
Der Browser speichert die relevanten HTTP-Header im Cache, um die Anzahl der HTTP-Anfragen zu minimieren
Ich habe vor Kurzem die 34 goldenen Regeln von Yah...
Vue implementiert Beispielcode zur Formulardatenvalidierung
Fügen Sie dem el-form-Formular Regeln hinzu: Defi...
Vorschläge zum Erstellen geschäftlicher HTML-E-Mails
Durch E-Mail-Marketing auf Genehmigungsbasis lass...
Eine kurze Erläuterung der Unterstützung von Gleitkommaoperationen durch den Linux-Kernel
Derzeit unterstützen die meisten CPUs Gleitkommae...
Detaillierte Analyse von MySQL-Deadlock-Problemen
Vorwort Wenn sich unser Geschäft in einem sehr fr...
js, um einen einfachen Bild-Drag-Effekt zu erzielen
In diesem Artikel wird der spezifische Code von j...
Lösung für den Fehler 2059 beim Verbinden von Navicat mit MySQL
Als ich kürzlich Django lernte, musste ich eine D...
Verwenden Sie den Crontab-Befehl in der Linux-Umgebung, um geplante periodische Ausführungsaufgaben einzurichten [einschließlich PHP-Ausführungscode].
Dieser Artikel verwendet den Befehl crontab in de...
Tutorial zur Installation von MySQL 5.7.18 unter Windows 10
In diesem Tutorial erfahren Sie alles über die In...
Lösung für Workbench, das keine Verbindung zu MySQL auf Alibaba Cloud Server Ubuntu herstellt (getestet)
In den letzten zwei Tagen hatte ich große Problem...
Installation und Deinstallation der dekomprimierten Version von MySQL 5.7 und Zusammenfassung häufiger Probleme
1. Installation 1. Herunterladen Gehen Sie zur of...
So fügen Sie in Linux stapelweise Dateipräfixe hinzu
Sie müssen „gt_“ vor den Dateinamen aller TXT-Dat...
Embed-Codes für mehrere ältere Player
Die Player, die wir auf Webseiten sehen, sind nic...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22
Dieser Artikel dokumentiert die Installation und ...
10 inhaltliche Prinzipien zur Verbesserung der Website-Performance
<br />Englische Adresse: http://developer.ya...