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
Detaillierte Erklärung des HTML-Seitenkopfcodebeispiels
Wissenspunkt 1: Legen Sie die Basis-URL der Webse...
Get/Delete-Methode zum Übergeben von Array-Parametern in Vue
Wenn Front-End und Back-End interagieren, müssen ...
CSS float (float, clear) beliebte Erklärung und Erfahrungsaustausch
Ich bin schon vor langer Zeit mit CSS in Berührun...
Detaillierte Erläuterung der benutzerdefinierten Anweisungen zur Vue.js-Quellcodeanalyse
Vorwort Zusätzlich zu den standardmäßig integrier...
Detaillierte Erklärung der Methoden des fs-Moduls und des Path-Moduls in Node.js
Überblick: Das Dateisystemmodul ist ein einfacher...
Manuelle und geplante Sicherungsschritte für die MySQL-Datenbank
Inhaltsverzeichnis Manuelle Sicherung Timer-Siche...
Detaillierte Erläuterung des Beispielcodes für die Verbesserungen und Änderungen, die CSS-Variablen bei der Entwicklung interaktiver JS-Komponenten mit sich bringen
1. Qualitative Änderungen durch CSS-Variablen Die...
Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI
1. BIOS überprüfen Überprüfen Sie zunächst, in we...
Installationsprozess der React Native-Umgebung
React-Native-Installationsprozess 1.npx react-nat...
Lösung für das Problem, dass der MySQL-Dienst gestartet wird, aber keine Verbindung hergestellt wird
Der MySQL-Dienst wird gestartet, aber es kann kei...
Installieren Sie Linux mithilfe einer virtuellen VMware-Maschine (CentOS7-Image).
1. VMware herunterladen und installieren Verknüpf...
Zusammenfassung der langsamen MySQL-Abfragevorgänge
Erklärung langsamer MySQL-Abfragen Das MySQL Slow...
Detaillierte Erklärung des Lebenszyklus von Angular-Komponenten (Teil 2)
Inhaltsverzeichnis 1. Haken anzeigen 1. Was bei d...
Spezifische Verwendung des Stapelkontexts in CSS
Vorwort Unter dem Einfluss einiger CSS-Interaktio...
Methode und Optimierungsprinzip für langsame MySQL-Abfragen
1. Zum Vergleich der Datumsgröße muss das an XML ...